本節我們來學習帶參混合,sass 中混合可以接受引數,我們可以通過使用@include
呼叫混合時給混合傳參,來定義混合生成的精確樣式。
給混合傳參
混合可以用sassscript
值作為引數,給定的引數被包括在混合中並且作為為變數提供給混合,既然是作為變數,那麼定義引數時,引數名前面需要加乙個$
符號。
當我們定義乙個帶參混合時,混合的引數被作為變數名,寫到混合名後面的小括號中,如果帶有多個引數則通過逗號將引數分隔。下面我們來看一下如何給乙個混合傳參。
示例:例如在混合中定義兩個引數$num
和$color
,
@mixin my-text($num, $color)
.other
編譯成 css **:
.other
我們在通過@include
指令呼叫混合時,需要給混合所帶的引數賦值,例如上述**中,給引數$num
賦值為14px
,給引數$color
賦值為#fdef92
。
預設值引數
像上面這個例子中,定義混合時帶有兩個引數,那麼呼叫混合時必須給這個兩個引數賦值,如果不給引數賦值或者只給乙個引數賦值則會報錯。例如下面是不給$num
引數賦值的報錯資訊:
error: mixin my-text is missing argument $num.
on line 8 of style.scss, in `my_text'
from line 8 of style.scss
use --trace for backtrace.
而如果我們希望可以不給混合中的某個引數傳參,可以在定義混合時使用普通變數的賦值語法為引數指定預設值,這樣當呼叫混合時,如果不給引數賦值,則會使用預設值代替。
示例:例如下面這個例子:
@mixin my-text($num, $color:pink)
.other
編譯成 css **:
.other
我們在定義混合時,給引數$color
指定了預設值pink
,所以當我們沒有給$color
賦值時,會自動使用定義好的預設值。
關鍵字引數
混合中除了可以使用上面講到的預設值引數,還可以使用關鍵字引數,關鍵字引數就是通過$name:value
形式傳參。使用這種方式來傳參,引數的順序並不重要,只要不漏掉引數就可以啦。
示例:
@mixin
my-text
($num, $color)
.other
編譯成 css **:
.other
可變引數
當我們給混合定義引數時,有時可能不確定混合中引數的數量,這時我們就可以使用...
來設定可變引數。
示例:例如我們給乙個元素設定box-shadow
時,可以使用任何數量的box-shadow
作為引數:
@mixin my-text($shadow...)
.other
編譯成 css **:
.other
可以看到,上述**中,在呼叫混合時,給my_text
指定了兩個引數的值。當然我們也可以給它指定多個引數的值。 Sass混合巨集
相當於函式,統一寫大段重複的樣式。在 sass 中,使用 mixin關鍵字來宣告乙個混合巨集。如 mixin border radius 在 sass 中,使用 include關鍵字來呼叫乙個混合巨集。如 button 編譯出來的 button 在混合巨集中,可以傳乙個不帶任何值的引數,比如 mix...
Sass之混合巨集 繼承 佔位符
1 混合巨集。當樣式變得越來越複雜,需要重複使用大段的樣式時,使用變數就無法達到我們目的了。這個時候混合巨集就派上用場了。而使用混合巨集時,首先要宣告混合巨集,而宣告混合巨集時有兩種,不帶引數混合巨集和帶引數混合巨集兩種。1.1不帶引數混合巨集的宣告 mixin border radius例如在乙個...
vue路由帶參
column label 操作 width 250 fixed right scope to 檢視 column 在html中聲名標籤,並使用 to來指定引數和url created by lixinjian1 on 2018 06 28.function let router new vuerou...