1.使用原因
使用CSS预处理语言的一个主要原因是想利用Sass获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的CSS。Sass目前有两种语法,一种是SASS,这是旧版的SASS语法,主要特点是去除了编写CSS时候的{},其文件的后缀名为".sass"。另一种是SCSS,是新版的sass,后缀名为".scss"。
2.变量
编写css的时候经常会遇到很多重复的属性值,可通过将这些重复的属性值赋给某个变量,在接下来的编写过程中,可将重复的属性值用这个变量代替。具体的实现代码如下。
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
<span style="white-space:pre"> </span>background:$bgColor;
<span style="white-space:pre"> </span>width:$width;
}
.variate a {color:$linkColor;}
可使用 在线SASS编译,编译后的CSS代码为
@charset "UTF-8";
/*设置变量*/
/*引用变量*/
.variate {
background: yellow;
width: 700px;
}
.variate a {
color: green;
}
3. SASS嵌套
3.1 属性嵌套
SASS的嵌套是SASS是第二个使用非常广泛的规则。SASS的嵌套使得结构能够一目了然。分为属性嵌套和选择器嵌套。具体的实现方法如下:
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
编译后的CSS代码为:
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
3.2 选择器嵌套
SASS代码如下:
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
编译后的CSS代码如下:
/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;
/*引用变量*/
.variate {
background:$bgColor;
width:$width;
}
.variate a {color:$linkColor;}
不过这种嵌套不要过多,根据bootstrap的CSS编写规范,最好不要超过3层嵌套,不然会降低CSS引擎的处理效率。
4. SASS的模块化(Mixins)
在平时写CSS的时候,很多时候有一样的(属性,属性值),可把这部分独立出现作为单独定义的模块,然后被选择器重复使用。例如以下的SASS代码
@mixin setBorder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setBorder(blue, 1px);
}
编译后的CSS代码为
p {
border-color: blue;
border-width: 1px;
border-style: dashed;
}
5. SASS的继承(extend)
可以理解为一个选择器继承另一个选择器上的所有样式。具体的实现方法如下:
.link {
font-size:18px;
}
.inherit {
@extend .link;
}
编译后的代码如下:
.link, .inherit {
font-size: 18px;
}
以上编译后的CSS代码多了一个类名,如果不需要这个多余的类名,可用"%"代替link的"."。