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 是函數的調用,可以在任何位置調用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM