知道它們，你就能玩轉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…