1.嵌套
相当于css中的后代选择
2.$变量
3.@mixin函数名(参数)
相当于js中的函数的功能,就是将一小段代码进行封装,通过传递不同的参数达到不同的效果
使用 @include 函数名(参数) 方法对函数进行调用
4.@import
可以通过@import引入其它的scss文件,相当于将额外的scss文件复制到当前文件
5.@extend
字面意思是继承,就是防止将相同的代码写多份,直接继承之前写过的内容
举例如下:
//嵌套
ul{
li{
a
}
}
//相当于
ul li a{
}
//变量
$toolbar-size: 52px;
//@mixin 函数名(参数)
@mixin opacity($opacity){
opacity: $opacity;
filter: alpha(opacity=$opacity * 100);
}
//调用时使用 @include
@include opacity(1);
//外部文件引入(引入时无需加文件名后缀,系统会自动补全,且只能引入.scss结尾的文件)
@import "toolbar";
//extend继承
.box{
...
...
...
}
.box2{
@extend .box
}