前端寫樣式使用預處理語言開發,是最有效的和方便維護
@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 是函數的調用,可以在任何位置調用。