时间：2021-07-01 10:21:17 帮助过：28人阅读
对于什么是sass，我想现在大家可能都有所了解了。其实就是css的一种开发工具，或者也可以说是将css编程化。其实和less是有很大的相似点的。或者说几乎都是相同的。但是对于这两种的高级用法，其实个人更加的偏向于sass！
关于sass的安装以及编译之类的这个东西上网一查一大把的就不多说了
我这里是用koala编译的。
下面简单的总结下sass的几个特点吧。
1、变量：
sass中允许使用变量，在sass中变量都是以$开头的。
$blue:#249804;
div{
color:$blue;
}
如果需要将变量嵌入在字符串中则就必须写在#{}中
类似于我在汇联易中自定义的栅格宽度的sass写法：
@mixin colWidth($value:20%) {
-webkit-box-flex: 0;
-webkit-flex: 0 0 $value;
-moz-box-flex: 0;
-moz-flex: 0 0 $value;
-ms-flex: 0 0 $value;
flex: 0 0 $value;
}
$i:1;
@while $i<=100{
.col-#{$i}{
@include colWidth($i*1%);
$i:$i+1;
}
}
／／这里用到的Mixin和循环后面会讲到。
变量非常的简单，基本也就这样。
2、计算功能
这个非常的简单，举个例子就可以了
在上面的例子中也用到了，比如$i*1%；
再比如：margin:(10px+2px);
3、嵌套
这里的嵌套给我的感觉就类似于dom树的树状结构似的。
很简单，举个例子就可以了
.hly{
.expense-type-icon-list {
box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, .26);
.scroll {
float: left;
.scroll-content-container {
width: 35em;
padding: 8px 10px;
float: left;
img {
float: left;
margin-left: 5px;
}
img:first-child {
margin-left: 0px;
}
}
}
}
}
对应的生成出来的css：
.hly .create-invoice .expense-type-icon-list {
box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, 0.26); }
.hly .create-invoice .expense-type-icon-list .scroll {
float: left; }
.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container {
width: 35em;
padding: 8px 10px;
float: left; }
.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img {
float: left;
margin-left: 5px; }
.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img:first-child {
margin-left: 0px; }
4、继承
sass允许一个选择器去继承另一个选择器，比如现在有个class1，
.class1{
border:1px soild #ddd;
}
现在有class2要继承class1的属性，则用@extend命令
.class2{
@extend .class1;
font-size:1.5em;
}
5、Mixin
这个可以理解为宏定义，angularjs中的指令，在变量的举例中就有说到了。这里再具体的说下
这里我们通过一个mixin来定义一个代码块
还是拿上面的例子：
@mixin colWidth($value:20%) {
-webkit-box-flex: 0;
-webkit-flex: 0 0 $value;
-moz-box-flex: 0;
-moz-flex: 0 0 $value;
-ms-flex: 0 0 $value;
flex: 0 0 $value;
}
用@include来调用它。
div{
@include colWidth(30%);
}
看到这里大家可能会有个疑问，为什么这里的mixin中有个参数在里面？
其实这个也就是Mixin的强大之处了（当然，你也可以不指定）
当指定了以后，我们可以传入不同的值，当然也可以缺省，当缺省的时候就是默认的指，例如上面的例子就是20%
6、颜色函数
说实话这个我不是很懂，因为基本我觉得是用不到的。简单从网上找了些例子：
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
大家这个也可以多查查。
7、插入文件
简单的一个命令@import
@import("path/fileName.scss");
如果是.css的文件
@import "fileName.css";
8、条件语句
从这里开始应该可以说是sass的一些高级的用法了吧
@if可以用来判断
div{
@if 1+2 ==3 {border:1px soild #ddd};
@if 3<2 {margin:0 auto};
}
当然，既然存在if，必然少不了else！用法如下：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
9、循环语句
sass支持for循环，while循环以及each命令
for循环：
@for $i form 1 to 10{
.class-#{i}{
margin-left:#{i}px;
}
}
while循环（同样是汇联易中的例子）：
@mixin colWidth($value:20%) {
-webkit-box-flex: 0;
-webkit-flex: 0 0 $value;
-moz-box-flex: 0;
-moz-flex: 0 0 $value;
-ms-flex: 0 0 $value;
flex: 0 0 $value;
}
$i:1;
@while $i<=100{
.col-#{$i}{
@include colWidth($i*1%);
$i:$i+1;
}
}
each例子：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
10、自定义函数
当然也是有特殊符号的：@function @return
@function double($i){
@return $i*2;
}
div{
margin:double(2em);
}
最后说一句，在项目中尽量还是少用sass的高级用法，因为可能项目跑起来编译特别慢，甚至会卡在高级用法中编译不出sass别的样式
比如我自定的栅格用的Mixin，这个在项目能够很快被编译，但是配合了while循环就会卡死。后来我是引入koala编译出来的css文件引入到项目中的～