scss使用规则

1.嵌套

相当于css中的后代选择，嵌套不要超过三层，否则产生难以理解的代码。

2.$变量

1
2

//变量
$toolbar-size: 52px;

3.@mixin函数名（参数）

相当于js中的函数的功能，就是将一小段代码进行封装，通过传递不同的参数达到不同的效果

使用 @include 函数名（参数） 方法对函数进行调用

1
2
3
4
5
6
7
8

//@mixin 函数名(参数)
@mixin opacity($opacity){
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);
}
 
//调用时使用 @include
@include opacity(1);

4.@import

可以通过@import引入其它的scss文件，相当于将额外的scss文件复制到当前文件

5.@extend

字面意思是继承，就是防止将相同的代码写多份，直接继承之前写过的内容

1
2
3

.user{
@extend .test
}

6.属性嵌套

将属性名称的公共部分写在外面，解析器会自动拼接

1
2
3
4
5
6
7

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

甚至可以这样写

1
2
3
4
5
6

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}

解析后，相当于将：后面的{}里面的内容都解析成-

1
2
3
4
5

nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}