一般写法
div{
p {}
}
&父选择器引用
div{
&:hover {}
&-span { background:red; }
}
相同前缀的css样式简写形式
div{
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
div{
font: 20px/24px fantasy {
weight: bold;
}
}
多行注释 /* */ 会被编译成css中的注释
单行注释 // 在编译后的css中去除
声明变量
局部变量 $width: 2px;
全局变量 $width: 50px !global;
数据类型
number -> 1 11.1 11px
string -> "title"
应用
$name: "p";
div #{$name} {
width: 100px;
}
color -> red
boolean -> true
null -> null
list -> 11px 10px 12px 或者 11px, 10px, 12px
map -> (key: value, key1: value1)
function
运算符
+ - * / % < > <= >=
其中 / 运算只在以下三种情况中生效
$width/2 和变量运算
(10px/8px) 加上小括号
5px + 8px/2px 作为其他运算表达式的一部分
@import 导入其他的css,scss文件
@import "demo"; 等效于 @import "demo.scss";
scss文件默认会编译成css文件，如果你的scss文件只想被其他文件import，可以在定义的文件名前面加上_
如 _demo.scss 然后使用 @import "demo" 即可
嵌套的@import
假设_demo.scss文件中定义了如下的css
div{
width: 100%;
}
在main.css中导入
.box {
@import "demo";
}
将编译成
.box div{
width: 100%;
}
@media 嵌套
编译后@media包裹在选择器的最上面，在做响应式时候，这种写法可以避免重复书写选择器
div {
width: 100%;
@media screen {
height: 100%;
}
}
@extend 选择器替换继承
基本使用
div{
width: 100%;
}
div.box {
height: 100%;
}
#id{
@extend div;
}
相当于将包含div的选择器的样式复制一份，然后把div替换成#id，编译后结果如下
div, #id {
width: 100%;
}
div.box, .box#id {
height: 100%;
}
占位符
div ye%box{
width: 100%;
}
#id{
@extend %box;
}
编译后结果
div ye#id {
width: 100%;
}
相当于定义函数
@mixin size($w, $h) {
width: $w;
height: $h;
}
div{
@include size(100%, 100%);
}