知道它们，你就能玩转SASS

在使用这个工具前，咱们要先了解这是一款具备什么功能的工具，为何要使用它，它有哪些有点，在咱们的开发阶段带来怎样的体验。

这是一款CSS预处理器，能够帮助咱们快速编译代码，帮助咱们更好的维护咱们的样式代码或者说维护项目，能够帮助开发者更有效和快速的工做。 它与LESS的在语法规则和功能方面略有差异。

1. 自定义变量

$color:pink;
.test1{
    background-color:$color;
}
复制代码

2. 插入一个变量

$right: right;
.test2{
    border-#{$right}:1px solid #000;
}
复制代码

3. 样式的加减乘除

$paramer:3;
.text4{
    height:(1px+3px);
    width: (96px/6);
    right: $paramer*4;
}
复制代码

4. 继承

.class5{
    border:1px solid red;
}
.class5E{
    @extend .class5;
    font-size:20px;
}
复制代码

5. 代码块的复用

@mixin text6 {
    height:50px;
    left:20px;
}
.text6M{
    @include text6
}
//这里的mixin就是定义一个能够复用的代码段，固然咱们也能够给它传递一个参数，就像这样同样：
@mixin text66($height){
    height:$heigth;
    left:20px;
}
.text6N{
    @include text66(100px);
}
复制代码

6. if语法，经过对if的判断来决定使用那一套样式

.text7{
    @if 1 +2 == 3 {
        border:1px solid ;
    }
    @if 5 < 3 {
        border:2px dsahed red;
    }
}
固然，咱们都知道if通常是要和else配合的，因此咱们也能够这样写
.test77{
    @if lightness($color) > 30%{
        background-color:#fff;
    }@else{
        background:#0ff;
    }
}
这里的lightness是一个scss颜色函数，$color指向以前定义的值。
复制代码

7. 循环语法，包括最多见的三种循环方法，for,while,each

//for 循环
@for $i from 1 to 5 {
    .item-#{$i} {
        border:#{$i}px solid;
    }
}
//while 循环
$m:8;
@while $m > 0 {
    .items-#{$m} {
        width:2em*$m;
    }
    $m:$m - 2 ;
}
//这里能够对$m进行运算 让它每次都减去2
//each 语法
@each $img in q,w,e,r {
    .#{$img} {
        background-image:url('#{$img}.png')
    }
}
复制代码

8. 函数语法

@function double ($number){
    @return $number*2;
}
.text9{
    font-size:double(20px);
}
复制代码

9. import导入语法

@import 'other.scss'
这样就在你如今的scss中导入了other.scss编写的scss
复制代码

scss语法并非不少，可是须要开发者灵活使用，这样才能事半功倍，要深入理解scss变量，以及如何插入变量，以及循环语法和函数思想

更多请查看官方文档：www.css88.com/doc/sass/#c…