Sass用法指南
关于
css并不算真正意义上的编程语言，它不能像其他编程语言一样使用变量、嵌套等来工作。为此，开发人员编写了一种对css进行预处理的“中间语言”，可以实现一些编程语言才有的功能，然后自动编译成css。于是，Sass就应运而生了。Sass是一种css预处理语言，采用Ruby语言编写的。
Sass在线转换css：https://www.sassmeister.com
基本用法
变量
SASS允许使用变量，所有变量以$开头。
$blue: #e8757e;
div {
color: $blue;
}如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side: top;
.box {
border-#{$side}-radius: 5px;
}计算功能
SASS允许在代码中使用算式：
$num: 2;
div {
width: 5px * $num;
}嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：
div h1 {
color: red;
}可以写成：
div {
h1 {
color: red;
}
}属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:link {
color: red;
}
}注释
SASS共有两种注释风格。
标准的CSS注释
/* comment */，会保留到编译后的文件。单行注释
// comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/代码的重用
继承
SASS允许一个选择器，继承另一个选择器。比如，现有info：
.info{
width: 200px;
border: 1px solid black;
margin: 0 auto;
}info-important要继承info，就要使用@extend命令：
.info-important {
@extend .info;
background-color: magenta;
}Mixin
Mixin是一组CSS声明，可以在样式表中重复使用。
使用@mixin命令，定义一个代码块。
@mixin left {
left: 20px;
}使用@include命令，调用这个mixin。
div {
@include left;
}mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 20px) {
left: $value;
}使用的时候，根据需要加入参数：
div {
@include left(30px);
}下面是一个mixin的实例，用来生成浏览器前缀。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}使用的时候，可以像下面这样调用：
div {
@include border-radius(15px);
}颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c导入局部文件
@import命令，用来导入其他源文件，被导入的文件就是partials（局部文件），可以将相似代码放入一个模块中，也就是局部文件，局部文件命名以_开头
// 导入_variables.scss局部文件
@import 'variables'如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";高级用法
条件语句
@if、@else if、@else命令用来判断，对于测试某些特殊情况很有用
@mixin border-stroke($value) {
@if $value == light {
border: 1px solid #000;
}
@else if $value == medium {
border: 3px solid #000;
}
@else if $value == heavy {
border: 5px solid #000;
}
@else {
border: none;
}
}
.box {
@include border-stroke(medium);
}循环语句
@for
@for命令可以在循环中添加样式
// 1 to 4=>循环1到3，不包括4
// 1 through 4=>循环1到4，包括4
@for $i from 1 to 4 {
.text-#{$i} {
font-size: 10px * $i;
}
}相当于：
.text-1 {
font-size: 10px;
}
.text-2 {
font-size: 20px;
}
.text-3 {
font-size: 30px;
}@while
@while命令实现同样的效果
$i: 1;
@while $i < 4 {
.text-#{$i} {
font-size: 10px * $i;
}
$i: $i + 1;
}@each
@each命令可以用来遍历列表或映射中的每个项目，类似于js的for…in循环
// 写法一
@each $color in red, green, blue {
.bg-#{$color} {
background-color: $color;
}
}
// 写法二
$colors: (color1: red, color2: green, color3: blue);
@each $key, $color in $colors {
.bg-#{$color} {
background-color: $color;
}
}相当于：
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.bg-blue {
background-color: blue;
}自定义函数
SASS允许用户编写自己的函数。
@function double($value) {
@return $value * 2;
}
div {
width: double(100px);
}