Sass 帶參混合

2021-10-12 08:37:24 字數 1903 閱讀 5891

本節我們來學習帶參混合,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...