scss語法介紹

這裡既然是對語法的介紹，那麼至於如何安裝和編譯scss我就不多少了，主要是因為本人在群裡認識的小夥伴有的不會用scss，所以就藉著放假的機會來對scss語法做個總結，博主在開發過程中用scss蠻多，所以對scss語法還是熟知的。

1.自定義變數

$color:pink;
.test1{
    background-color:$color;
}

通過編譯工具編譯出來後

.test1{
    background-color:pink;
}

注：時間原因我在這裡只寫scss了，就不寫編譯後的結果，一來方便大家自己去嘗試編譯，二來增加大家對scss的理解：編譯工具

$right:right;
.test2{
    border-#{$right}:1px solid #000;
}

3.子元素書寫

.text3{
    .text33{
        border:1px solid;
    }   
}

4.樣式的加減乘除

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

5.繼承

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

6.程式碼塊的複用

@mixin text6 {
    height:50px;
    left:20px;
}
.text6M{
    @include text6
}
//這裡的mixin就是定義一個可以複用的程式碼段，當然我們也可以給它傳遞一個引數，就像這樣一樣：
@mixin text66($height){
    height:$heigth;
    left:20px;
}
.text6N{
    @include text66(100px);
}   
 

7.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指向之前定義的值。

8.迴圈語法，包括最常見的三種迴圈方法，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')
    }
}

9.函式語法

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

10.import匯入語法

@import 'other.scss'
這樣就在你現在的scss中匯入了other.scss編寫的scss

scss語法並不是很多，但是需要開發者靈活使用，這樣才能事半功倍，要深刻理解scss變數，以及如何插入變數，以及迴圈語法和函式思想，如果遇到不太清楚的可以給博主留言哈，歡迎指正和提出問題。