大纲：1. 变量 2. 嵌套 3.混入(mixin) 4. placeholder
- 变量
在SCSS中可以用$来定义一个变量，用于代替代码中重复率高的属性代码。
html代码:
<body>
<h1>你好啊，兄弟！</h1>
</body>
scss代码:
$r: red; // 声明$r来代替“red”
h1 {
color: $r; // 等价于 color: red
}
image.png
- 嵌套
我感觉嵌套是一个非常重要的提升，因为这会让css显得跟html一样有层次感和结构感。
同样对上述html代码。
scss代码：
$r: red;
body {
background-color: gray;
h1 {
color: $r;
}
}
// 等价于
body {
background-color: gray;
}
body h1 {
color: red;
}
image.png
如图，其实浏览器在解析代码的时候还是按css方法编码的，只是我们在编辑器中可以写的更高效、方便。
- 混入(mixin)
这个功能我理解为：封装好一段代码的变量，方便之后的复用。
以多行文本省略为例：
html代码：
<body>
<h1>你好啊，兄弟！你好啊，兄弟！你好啊，兄弟！你好啊，兄弟！</h1>
</body>
scss代码：
@mixin ellipse-line($line-num: 2){
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line-num;
-webkit-box-orient: vertical;
}
$r: red;
body {
color: gray;
h1 {
width: 400px;
@include ellipse-line(2);
color: $r;
}
}
多行文本省略.png
图中很明显解析出mixin所封装好的多行文本省略的代码。
这看起来很方便，但是有一个缺点。
$r: red;
body {
color: gray;
h1 {
width: 400px;
@include ellipse-line(2);
color: $r;
}
}
h1 {
@include ellipse-line(2);
}
image.png
图中显示，会对mixin封装的代码再次解析，写了2遍，这反而会增大代码量。然后我们有了第四种方式：placeholder
- placeholder
%ellipse-line2{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
$r: red;
body {
color: gray;
h1 {
width: 400px;
@extend %ellipse-line2;
color: $r;
}
}
h1 {
@extend %ellipse-line2;
}
image.png
如图，使用placeholder可以将标签统一到一起，更易懂。
网友评论