在之前我写过一篇CSS进阶：LESS快速入门的文章，这次这个sass和less一样是css预处理器，同样对对css的编写提高不少的效率，虽然sass和less用法都差不多，但在网上浏览博客时，总是发现sass比less讨论的人更多，用的人也更多，所以说有必要把sass的基本用法也学习一下。
一、安装sass
sass是ruby语言写的，所以必须先安装ruby，然后再把sass装好。
如果你是使用webpack或者其它打包工具，可直接在项目中写sass，比如vue-cli搭建的vue项目，只需要安装sass的loader就可以直接使用了。
这里假定你已经安装好了ruby，接下来只需要在命令行里输入：
gem install sass
就可以使用sass了，这点相比less是比较麻烦的。
二、sass编译
如果你对css是一定的了解，那么对sass的理解也会更加的快，sass文件后缀名是.scss，意思是Sassy CSS。
通过下面的命令可以将.scss文件转化为css代码：
sass test.scss
或者保存一个指定的css文件名：
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。 * expanded：没有缩进的、扩展的css代码。 * compact：简洁格式的css代码。 * compressed：压缩后的css代码。
在生产环境中，我们一般是使用compressed来编译
三、sass基本使用
1.变量
在sass中，所有变量以$开头
$blue : #1875e7;
p {
color : $blue;
}
也可以将变量镶嵌在字符串中，就必须使用#{}
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2.计算功能
在sass中，同样可以使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.嵌套
p h1 {
color : red;
}
也可以这样写：
p {
hi {
color:red;
}
}
就连属性也是可以嵌套的，比如说border-color属性，但是border必须加上冒号：
p {
border: {
color: red;
}
}
在嵌套中，可以用&引用父元素，比如a:hover
a {
&:hover { color: #ffb3ff; }
}
4.注释
据我了解less的注释只有一种，在编译时也不会被保留，而在sass中，有两种注释风格：
1. 标准css注释/* comment */ ，会保留到编译后的文件。
2. 单行注释：// comment，只会在sass文件中显示，编译后被省略。
像下面这样在/*加个!号是表示重要注释，编译后会保留，就算是压缩模式下的编译，通常放版权信息：
/*! 重要注释！ */
四、sass代码重用
1.继承
在sass选择器中允许继承另一个选择器，比如说base:
.class1 {
border: 1px solid #ddd;
}
base2继承base，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
2.Mixin
sass中的Mixin像c语言中的宏,是可以重用的代码块，使用@mixin就可以定义：
@mixin left {
float: left;
margin-left: 10px;
}
使用@include调用上面这个mixin：
p {
@include left;
}
mixin还可以指定参数和默认值：
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
可以不写参数，同样也可以写：
p {
@include left(20px);
}
```
来看一个mixin实例，用来生成浏览器前缀：
```css @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } ``` 这样调用：
```css #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); } ```
### 3.颜色函数 颜色函数可以很方便的生成一系列的颜色：
```css lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c
4.插入文件
和css引入同样，可以使用@import命令来插入外部文件：
@import "path/file.scss";
四、sass高级用法
1.条件语句
支持使用@if语句：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
还有配套的else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2.循环语句
支持for循环，好像less不支持吧：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也可以使用while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each循环：
$i: 6;
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3.自定义函数
还支持自定义函数：
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
less和sass有很多相似之处，个人认为sass更加强大点，并且有团队长期维护，更加可靠，不过还是要根据个人需求或者公司的需求来进行选择，工具是死的，人是活的。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
less和sass有很多相似之处，个人认为sass更加强大点，并且有团队长期维护，更加可靠，不过还是要根据个人需求或者公司的需求来进行选择，工具是死的，人是活的。
