Sass混合宏、繼承、占位符_html/css

1 @mixin border-radius{2 -webkit-border-radius: 5px;3 border-radius: 5px;4 }

其中 @mixin 是用來(lái)聲明混合宏的關(guān)鍵詞，有點(diǎn)類(lèi)似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱(chēng)。大括號(hào)里面是復(fù)用的樣式代碼。
帶參數(shù)混合宏：
除了聲明一個(gè)不帶參數(shù)的混合宏之外，還可以在定義混合宏時(shí)帶有參數(shù)，如：

1 @mixin border-radius($radius:5px){2 -webkit-border-radius: $radius;3 border-radius: $radius;4 }

復(fù)雜的混合宏：
上面是一個(gè)簡(jiǎn)單的定義混合宏的方法，Sass 中的混合宏還提供更為復(fù)雜的，你可以在大括號(hào)里面寫(xiě)上帶有邏輯關(guān)系，幫助更好的做你想做的事情,如：

1 @mixin box-shadow($shadow...) {2 @if length($shadow) >= 1 {3 @include prefixer(box-shadow, $shadow);4 } @else{5 $shadow:0 0 4px rgba(0,0,0,.3);6 @include prefixer(box-shadow, $shadow);7 }8 }

這個(gè) box-shadow 的混合宏，帶有多個(gè)參數(shù)，這個(gè)時(shí)候可以使用“ … ”來(lái)替代。簡(jiǎn)單的解釋一下，當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時(shí)，表示有多個(gè)陰影值，反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”。

混合宏-調(diào)用混合宏
在 Sass 中通過(guò) @mixin 關(guān)鍵詞聲明了一個(gè)混合宏，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來(lái)調(diào)用聲明好的混合宏。

1 @mixin border-radius{2 -webkit-border-radius: 3px;3 border-radius: 3px;4 }

在一個(gè)按鈕中要調(diào)用定義好的混合宏“border-radius”，可以這樣使用：

1 button {2 @include border-radius;3 }

這個(gè)時(shí)候編譯出來(lái)的 CSS:

1 button {2 -webkit-border-radius: 3px;3 border-radius: 3px;4 }

混合宏的參數(shù)--傳一個(gè)不帶值的參數(shù)
Sass 的混合宏，可以傳參，在 Sass 中傳參主要有以下幾種情形：
A) 傳一個(gè)不帶值的參數(shù)
在混合宏中，可以傳一個(gè)不帶任何值的參數(shù)。

1 @mixin border-radius($radius){2 -webkit-border-radius: $radius;3 border-radius: $radius;4 }

在混合宏“border-radius”中定義了一個(gè)不帶任何值的參數(shù)“$radius”。
在調(diào)用的時(shí)候可以給這個(gè)混合宏傳一個(gè)參數(shù)值：

1 .box{2 @include border-radius(3px);3 }

這里表示給混合宏傳遞一個(gè)“border-radius”的值為“3px”。
編譯出來(lái)的CSS：

1 .box {2 -webkit-border-radius: 3px;3 border-radius: 3px;4 }

混合宏的參數(shù)--傳一個(gè)帶值的參數(shù)
在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個(gè)默認(rèn)值，例如：

1 @mixin border-radius($radius:3px){2 -webkit-border-radius: $radius;3 border-radius: $radius;4 }

在混合宏“border-radius”傳了一個(gè)參數(shù)“$radius”，而且給這個(gè)參數(shù)賦予了一個(gè)默認(rèn)值“3px”。
在調(diào)用類(lèi)似這樣的混合宏時(shí)，會(huì)多有一個(gè)機(jī)會(huì)，假設(shè)你的頁(yè)面中的圓角很多地方都是“3px”的圓角，那么這個(gè)時(shí)候只需要調(diào)用默認(rèn)的混合宏“border-radius”:

1 .btn {2 @include border-radius;3 }

編譯出來(lái)的 CSS:

1 .btn {2 -webkit-border-radius: 3px;3 border-radius: 3px;4 }

但有的時(shí)候，頁(yè)面中有些元素的圓角值不一樣，那么可以隨機(jī)給混合宏傳值，如：

1 .box {2 @include border-radius(50%);3 }

編譯出來(lái)的 CSS:

1 .box {2 -webkit-border-radius: 50%;3 border-radius: 50%;4 }

混合宏的參數(shù)--傳多個(gè)參數(shù)
Sass 混合宏除了能傳一個(gè)參數(shù)之外，還可以傳多個(gè)參數(shù)，如：

1 @mixin center($width,$height){2 width: $width;3 height: $height;4 position: absolute;5 top: 50%;6 left: 50%;7 margin-top: -($height) / 2;8 margin-left: -($width) / 2;9 }

在混合宏“center”就傳了多個(gè)參數(shù)。在實(shí)際調(diào)用和其調(diào)用其他混合宏是一樣的：

1 .box-center {2 @include center(500px,300px);3 }

編譯出來(lái) CSS:

.box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px;}

有一個(gè)特別的參數(shù)“…”。當(dāng)混合宏傳的參數(shù)過(guò)多之時(shí)，可以使用參數(shù)來(lái)替代，如：

 1 @mixin box-shadow($shadows...){ 2 @if length($shadows) >= 1 { 3 -webkit-box-shadow: $shadows; 4 box-shadow: $shadows; 5 } @else { 6 $shadows: 0 0 2px rgba(#000,.25); 7 -webkit-box-shadow: $shadow; 8 box-shadow: $shadow; 9 }10 }

在實(shí)際調(diào)用中：

1 .box {2 @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));3 }

編譯出來(lái)的CSS:

1 .box {2 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);3 box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);4 }

混合宏的參數(shù)--混合宏的不足
混合宏在實(shí)際編碼中給我們帶來(lái)很多方便之處，特別是對(duì)于復(fù)用重復(fù)代碼塊。但其最大的不足之處是會(huì)生成冗余的代碼塊。比如在不同的地方調(diào)用一個(gè)相同的混合宏時(shí)。如：

 1 @mixin border-radius{ 2 -webkit-border-radius: 3px; 3 border-radius: 3px; 4 } 5 6 .box { 7 @include border-radius; 8 margin-bottom: 5px; 9 }10 11 .btn {12 @include border-radius;13 }

示例在“.box”和“.btn”中都調(diào)用了定義好的“border-radius”混合宏。先來(lái)看編譯出來(lái)的 CSS：

 1 .box { 2 -webkit-border-radius: 3px; 3 border-radius: 3px; 4 margin-bottom: 5px; 5 } 6 7 .btn { 8 -webkit-border-radius: 3px; 9 border-radius: 3px;10 }

Sass 在調(diào)用相同的混合宏時(shí)，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。

擴(kuò)展/繼承(@extend)
在 Sass 中繼承類(lèi)中的樣式代碼塊。在 Sass 中是通過(guò)關(guān)鍵詞 “@extend”來(lái)繼承已存在的類(lèi)樣式塊，從而實(shí)現(xiàn)代碼的繼承。如下所示：

 1 //SCSS 2 .btn { 3 border: 1px solid #ccc; 4 padding: 6px 10px; 5 font-size: 14px; 6 } 7 .btn-primary { 8 background-color: #f36; 9 color: #fff;10 @extend .btn;11 }12 .btn-second {13 background-color: orange;14 color: #fff;15 @extend .btn;16 }

編譯出來(lái)之后：

 1 //CSS 2 .btn, .btn-primary, .btn-second { 3 border: 1px solid #ccc; 4 padding: 6px 10px; 5 font-size: 14px; 6 } 8 .btn-primary { 9 background-color: #f36;10 color: #fff;11 }13 .btn-second {14 background-clor: orange;15 color: #fff;16 }

從示例代碼可以看出，在 Sass 中的繼承，可以繼承類(lèi)樣式塊中所有樣式代碼，而且編譯出來(lái)的 CSS 會(huì)將選擇器合并在一起，形成組合選擇器：

1 .btn, .btn-primary, .btn-second {2 border: 1px solid #ccc;3 padding: 6px 10px;4 font-size: 14px;5 }

占位符%placeholder
Sass 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，可以取代以前 CSS 中的基類(lèi)造成的代碼冗余的情形。 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話(huà)，不會(huì)產(chǎn)生任何代碼。

1 %mt5 {2 margin-top: 5px;3 }4 %pt5{5 padding-top: 5px;6 }

這段代碼沒(méi)有被 @extend 調(diào)用，只有通過(guò) @extend 調(diào)用才會(huì)產(chǎn)生代碼：

 1 //SCSS 2 %mt5 { 3 margin-top: 5px; 4 } 5 %pt5{ 6 padding-top: 5px; 7 } 8 9 .btn {10 @extend %mt5;11 @extend %pt5;12 }13 14 .block {15 @extend %mt5;16 span {17 @extend %pt5;18 }19 }

編譯出來(lái)的CSS

1 //CSS2 .btn, .block {3 margin-top: 5px;4 }5 .btn, .block span {6 padding-top: 5px;7 }

通過(guò) @extend 調(diào)用的占位符，編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起。

混合宏 VS 繼承 VS 占位符
什么時(shí)候用混合宏，什么時(shí)候用繼承，什么時(shí)候使用占位符？
a)Sass中的混合宏使用

總結(jié)：不會(huì)自動(dòng)合并相同的樣式代碼，如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼，造成代碼的冗余。他還可以傳參數(shù)。

如果你的代碼塊中涉及到變量，建議使用混合宏來(lái)創(chuàng)建相同的代碼塊。
b) Sass 中繼承

總結(jié)：使用繼承后，編譯出來(lái)的 CSS 會(huì)將使用繼承的代碼塊合并到一起，通過(guò)組合選擇器的方式展現(xiàn)，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來(lái)的代碼相對(duì)于混合宏來(lái)說(shuō)要干凈的多。但是他不能傳變量參數(shù)。
如果你的代碼塊不需要專(zhuān)任何變量參數(shù)，而且有一個(gè)基類(lèi)已在文件中存在，那么建議使用 Sass 的繼承。
c) 占位符

總結(jié)：編譯出來(lái)的 CSS 代碼和使用繼承基本上是相同，只是不會(huì)在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區(qū)別的，“占位符是獨(dú)立定義，不調(diào)用的時(shí)候是不會(huì)在 CSS 中產(chǎn)生任何代碼；繼承是首先有一個(gè)基類(lèi)存在，不管調(diào)用與不調(diào)用，基類(lèi)的樣式都將會(huì)出現(xiàn)在編譯出來(lái)的 CSS 代碼中?！?

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com