一、什么是Sass

Sass是一种css的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得css的开发变动简单可维护。

这篇文章总结了sass的主要用法，平常就可以不用每次去看官方文档了。

使用Sass的好处

Sass的学名叫做“预处理器”，就是在css的基础上，引入变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们使用更少的代码实现同样的效果，而且代码的整洁度，可读性更强，可以把反复用到的“css”属性定义成变量，然后通过变量名引用它们。

二、常用的Sass知识

1、变量

必须以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

nth()方法，第一个参数为变量名称，第二个参数为变量的第几个值，从1开始数

例1:声明一个字体变量

    $font-size:16px;
    div{
        font-size: $font-size;
    }

例2:将变量嵌入到字符串中

$radius:radius;
.rounded{
  border-#{$radius}:10px;
  border: solid 1px #{$fontColor};
}

例3:使用nth()调取变量的值

  $linkColor:green red!default;
    div{
        color: nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }

2、sass中的map

语法

Sass 的 map 常常被称为数据地图，也有人称其为数组，它是以 key:value 成对出现

map数据以key：value的形式赋予，其中key和value是成对，并且每队之间用（，）分隔，其中最后一组没有（，）
map-get($map, key) 获取指定的值
用法：

$map: ( 
  key1: value1,
  key2: value2,
  key3: value3
)
.btn {  
  color: map-get($btn-colors, key3);
 }

列如：

$fontColor:red;
$map:(
  jd:red,
  tb:orange,
  vp:hotpink
);
h1{
    color: map-get($map , jd );
}

3、判断@if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用.

例1：单独使用@if

$status:true;
h1{
   @if $status {
       color: red;
   }

例2：根据传入的值进行判断

$status:login;
h1{
    @if $status == login {
        color: blue;
    }@else if $status == error{
        color: red;
    }@else{
        color: black;
    }
}

4、循环

4.1： @for循环

for循环有两种形式 ↓

@for $i from 1 to 4 { 语句;}不包含结束值
@for $i from 1 through 4{ 语句;} 包含结束值

$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

例1：through关键字

ul {
  list-style: none;
}
@for $i from 1 through 4 {
    li:nth-child(#{$i}){
        background: url(../images/#{$i}.png);
        float: left;
        width: 200px;
        height: 200px;
        margin: 0 20px 20px 0;
        background-size: cover;
    }
}

例1：to关键字

ul {
  list-style: none;
}
@for $i from 1 to 3{
  li:nth-child(#{$i}){
 
  background: url(../../images/#{$i}.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
   background-size:cover;
  }
}

4.2: @each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
@each 循环指令的形式：

@each $var in <list>

列如：each 可以循环map

$style:(h1:20px,h2:10px,h3:6px);
@each $h,$s in $style{
  #{$h}{
    font-size:$s
  }
}

5、sass中的mixin(混合)

概念：

Mixins是SASS中的一个强大的功能。使用@mixin根据功能定义一个模块，然后在需要使用的地方通过@include来调用声明的mixins。其主要功能是可以让你的代码简洁高效.

基本使用

例1: 基本的使用button的样式mixin,进行调用

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

//引用
.btn{
  @include button;
}

例2：mixin也可以传递参数

@mixin button($background) {  
    font-size: 1px;  
    padding: 0.5px 1.0px;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：

进行调用
.button-green {  
    @include button(green);  
}

多个参数也可以使用逗号隔开，也都可以设置默认参数

例3：在例1的基础上增加$color,同时给背景设置默认颜色

@mixin button($backgroundColor,$color:red){
    font-size:1px;
    padding:0.5px 2px;
    text-decoration: none;
    color:$color;
    background: $backgroundColor;
}
.button-green{
    @include button(green);
}

6、Sass 嵌套

6.1后代嵌套和子嵌套,css选择器嵌套类似于HTML的嵌套规则

.box{
    width:100px;
    height:100px;
    //后代嵌套
    .middle{
        width:50px;
        height:50px;
        //子嵌套
        >.small{
            width:25px;
            height:25px;
        }
    }
}

6.2 属性嵌套

属性前缀相同嵌套

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

复合属性的同一和分解

.left{
   border:1px solid #000{
       left:none;
       bottom:{
           width:3px;
       }
   };
}

7、自定义函数

语法：

@function 函数名(形参) {
   @return;
 }

函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量

例1：在函数内对宽度进行运算

@function getWidth($w) {
  @return $w * 2;
}

.main{
  max-width: #{getWidth(20)}px;
}

8、sass的继承

语法：@extend

选择器1{属性1:属性值1}
选择器2{@extend 选择器1}//继承选择器1的全部样式
&//父选择器

例1：

.big{
    border:2px solid red;
}
.small{
    @extend .big;
}

继承结果.png

9、导入

就是将函数、变量、样式语句分离，全放在一个文件太杂乱
用法:

@import '文件名';

**实现步骤：1.创建一个被导入文件variate.scss

$color: yellow;
$fontColor:red;
$map:(
  jd:red,
  tb:orange,
  vp:hotpink
);

2.在主sass文件夹导入

@import '../utils/variate.scss';

h1{
    color: map-get($map , jd );
}

注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。

10、sass的运算

一般的编程语法中都支持使用运算，Sass 中同样可以做各种数学运算，包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。

加减乘除：

h1{
    color: map-get($map , jd );
    font-size:16px + 10; // ! 加法运算
}
h2 {
    color: map-get($map , tb );
    font-size:16px - 2; // ! 减法运算
}
h3{
    color: map-get($map , vp );
    font-size:12px * 2; // ! 乘法运算
}
h4{
    color: map-get($map , vp );
    font-size:(24px / 2); // ! 除法运算
}

注意：每个运算符前后必须有空格；除法运算，要进行运算需要用()号括起来；不然会原样输出

变量运算

$one: 1px;
$two: 2px;
$three: 3px;
h1{
    color: map-get($map , jd );
    font-size: $one+$two+$three; 
}

颜色运算
（颜色会采用十六进制的，如黑色#000000）

p {
  color: #010203 + #040506;
  // color: #010203 * 2;
}

字符运算

$content: 'hello' + 'world';
.box:before {
   content: $content;
}

预处理器Sass用法指南