Sass混合巨集

2021-10-06 17:16:05 字數 2289 閱讀 2874

相當於函式，統一寫大段重複的樣式。

在 sass 中，使用@mixin關鍵字來宣告乙個混合巨集。如

@mixin border-radius
在 sass 中，使用@include關鍵字來呼叫乙個混合巨集。如

button
編譯出來的**：

button
在混合巨集中，可以傳乙個不帶任何值的引數，比如：

@mixin


border-radius


($radius)
在呼叫的時候可以給這個混合巨集傳乙個引數值：

.box
在 sass 的混合巨集中，還可以給混合巨集的引數傳乙個預設值，例如：

@mixin


border-radius


($radius


:3px)
在混合巨集「border-radius」傳了乙個引數「$radius」，而且給這個引數賦予了乙個預設值「3px」。

在呼叫類似這樣的混合巨集時，會多有乙個機會，假設你的頁面中的圓角很多地方都是「3px」的圓角，那麼這個時候只需要呼叫預設的混合巨集「border-radius」:

.btn
但有的時候，頁面中有些元素的圓角值不一樣，那麼可以隨機給混合巨集傳值，如：

.box
編譯出來的 css:

.box
sass 混合巨集除了能傳乙個引數之外，還可以傳多個引數，如：

@mixin


center


($width,$height)
在混合巨集「center」就傳了多個引數。在實際呼叫和其呼叫其他混合巨集是一樣的：

.box-center
有乙個特別的引數「…」。當混合巨集傳的引數過多之時，可以使用引數來替代，如：

@mixin


box-shadow


($shadows...)


@else


}
在實際呼叫中：

.box
混合巨集在實際編碼中給我們帶來很多方便之處，特別是對於復用重複**塊。但其最大的不足之處是會生成冗餘的**塊。比如在不同的地方呼叫乙個相同的混合巨集時。

@mixin border-radius


.box


.btn
示例在「.box」和「.btn」中都呼叫了定義好的「border-radius」混合巨集。先來看編譯出來的 css：

.box


.btn
上例明顯可以看出，sass 在呼叫相同的混合巨集時，並不能智慧型的將相同的樣式**塊合併在一起。這也是 sass 的混合巨集最不足之處。

可以使用繼承或佔位符解決編譯後**冗餘的問題

//scss


.btn


.btn-primary


.btn-second
編譯後

//css


.btn, .btn-primary, .btn-second


.btn-primary


.btn-second
sass 中的佔位符 %placeholder 功能是乙個很強大，可以取代以前 css 中的基類造成的**冗餘的情形

//scss


%mt5


%pt5


.btn


.block


}
編譯出來的css

//css


.btn, .block


.btn, .block span
從編譯出來的 css **可以看出，通過 @extend 呼叫的佔位符，編譯出來的**會將相同的**合併在一起。這也是我們希望看到的效果，也讓你的**變得更為乾淨。

Sass之混合巨集 繼承 佔位符

1 混合巨集。當樣式變得越來越複雜，需要重複使用大段的樣式時，使用變數就無法達到我們目的了。這個時候混合巨集就派上用場了。而使用混合巨集時，首先要宣告混合巨集，而宣告混合巨集時有兩種，不帶引數混合巨集和帶引數混合巨集兩種。1.1不帶引數混合巨集的宣告 mixin border radius例如在乙個...

Sass 混合巨集 VS 繼承 VS 佔位符

什麼時候用混合巨集，什麼時候用繼承，什麼時候使用佔位符？其實他們各有各的優點與缺點，先來看看他們使用效果 a sass 中的混合巨集使用 總結 編譯出來的 css 清晰告訴了大家，他不會自動合併相同的樣式 如果在樣式檔案中呼叫同乙個混合巨集，會產生多個對應的樣式 造成 的冗餘，這也是 csser 無...

Sass 帶參混合

本節我們來學習帶參混合，sass 中混合可以接受引數，我們可以通過使用 include呼叫混合時給混合傳參，來定義混合生成的精確樣式。給混合傳參 混合可以用sassscript值作為引數，給定的引數被包括在混合中並且作為為變數提供給混合，既然是作為變數，那麼定義引數時，引數名前面需要加乙個 符號。當...