Sass之混合巨集 繼承 佔位符

2022-08-10 09:03:10 字數 1778 閱讀 3483

1、混合巨集。　　

當樣式變得越來越複雜，需要重複使用大段的樣式時，使用變數就無法達到我們目的了。這個時候混合巨集就派上用場了。

而使用混合巨集時，首先要宣告混合巨集，而宣告混合巨集時有兩種，不帶引數混合巨集和帶引數混合巨集兩種。

1.1不帶引數混合巨集的宣告

@mixin border-radius
例如在乙個按鈕裡要呼叫上述那個不帶引數混合巨集時，可以這樣使用。

button
1.2 帶引數混合巨集的宣告又分為不帶任何值的引數和帶值的引數。例如：

1.2.1帶值的引數的混合巨集宣告

@mixin border-radius($radius:5px)
在乙個按鈕中呼叫上述帶值的引數的混合巨集宣告，可以這樣使用

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

.btn
1.2.2不帶值的引數的混合巨集宣告

@mixin border-radius($radius)
呼叫不帶值的引數的混合巨集宣告，可以這樣做，如：

.box
2、繼承

//scss


.btn 


.btn-primary 


.btn-second
此時編譯出來的css為：

//css


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


.btn-primary 


.btn-second
可以看出在 sass 中的繼承，可以繼承類樣式塊中所有樣式**，而且編譯出來的 css 會將選擇器合併在一起，形成組合選擇器。

3、佔位符%placeholder

sass 中的佔位符 %placeholder 功能是乙個很強大，很實用的乙個功能，他可以取代以前 css 中的基類造成的**冗餘的情形。因為 %placeholder 宣告的**，如果不被 @extend 呼叫的話，不會產生任何**。例如：　

%mt 


%pt
這段**沒有被 @extend 呼叫，他並沒有產生任何**塊，只是靜靜的躺在你的某個 scss 檔案中。只有通過 @extend 呼叫才會產生**：

//scss


%mt 


%pt.btn 


.block 


}
編譯出來的css為：

//css


.btn, .block 


.btn, .block span
從編譯出來的 css **可以看出，通過 @extend 呼叫的佔位符，編譯出來的**會將相同的**合併在一起。

然而有些時候我們就在糾結啥時候該用混合巨集，啥時候用繼承，啥時候用佔位符呢？這裡先來看個**吧

建議：

1、如果**塊中涉及到變數，建議使用混合巨集來建立相同的**塊。

2、如果你的**塊不需要傳任何變數引數，而且有乙個基類已在檔案中存在，那麼建議使用 sass 的繼承

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

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

Sass混合巨集

相當於函式，統一寫大段重複的樣式。在 sass 中，使用 mixin關鍵字來宣告乙個混合巨集。如 mixin border radius 在 sass 中，使用 include關鍵字來呼叫乙個混合巨集。如 button 編譯出來的 button 在混合巨集中，可以傳乙個不帶任何值的引數，比如 mix...

常用scss佔位符 混合巨集mixin及引用方法

center align a block level element block得有寬度margin左右為auto才能居中 引用 extend center block mixin center block center block 引用 include center include center ...