sass - 選擇器用法總結

前端寫樣式使用預處理語言開發，是最有效的和方便維護 

 @mixin 混合

 @extend 擴展

mixin 能夠聲明函數 而且會返回新的樣式組合，至關於樣式組合工具 
能夠聲明多個重名的 mixin函數，參數能夠不一樣，而且在調用的時候，會根據傳入的參數個數匹配調用最合適的 mixin函數 
mixin 中能夠使用 @if 關鍵字按照條件返回合適的樣式 
mixin 語句能夠聲明函數或者變量，聲明函數時，能夠使用when關鍵字 

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}

@mixin border($ps, $color){
    @if $ps == 'top' {
        border-bottom: 2px solid $color;
    }
    @if $ps == 'right' {
        border-left: 2px solid $color;
    }
    @if $ps == 'left' {
        border-right: 2px solid $color;
    }
    @if $ps == 'bottom' {
        border-top: 2px solid $color;
    }
}

　　

mixin 能夠是已有的樣式，使用方式能夠加()或者不加 
能夠給 mixin 加 !important 至關因而做用在普通樣式上 

@include

include 至關於函數的調用，或者是變量的引用，能夠使用已有樣式，或者使用mixin聲明的樣式函數返回的樣式，樣式只在當前做用域生效，且不影響其餘樣式產出結果。 

@mixin tab-active($ps) {
    color: $activeColor;
    @include border($ps, $bottomlineColor);
}

 

@extend

有做用域，在 @media中使用，只會做用於當前 media，使用當前media內的樣式 
extend 至關於給當前樣式的子樣式 
一般用在 & 父選擇器，樣式，id選擇器的後面，做用是擴展子類樣式 

@mixin 和 @include區別

二者都是處理樣式，@mixin能夠被當作產出樣式的函數，能夠接受傳參； @include 是函數的調用，能夠在任何位置調用。