-
在Sass中可以有以下強大的功能： 在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個默認(rèn)值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認(rèn)值“3px”。 在調(diào)用類似這樣的混合宏時，會多有一個機會，假設(shè)你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調(diào)用默認(rèn)的混合宏“border-radius”: .btn { @include border-radius; } 編譯出來的 CSS: .btn { -webkit-border-radius: 3px; border-radius: 3px; } 但有的時候，頁面中有些元素的圓角值不一樣，那么可以隨機給混合宏傳值，如： .box { @include border-radius(50%); } 編譯出來的 CSS: .box { -webkit-border-radius: 50%; border-radius: 50%; }查看全部
-
在Sass的混合宏中可以有以下強大功能 （1）傳一個不帶值的參數(shù) 在混合宏中，可以傳一個不帶任何值的參數(shù)，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定義了一個不帶任何值的參數(shù)“$radius”。 在調(diào)用的時候可以給這個混合宏傳一個參數(shù)值： .box { @include border-radius(3px); } 這里表示給混合宏傳遞了一個“border-radius”的值為“3px”。 編譯出來的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏，那么在實際調(diào)用中，其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一個按鈕中要調(diào)用定義好的混合宏“border-radius”，可以這樣使用： button { @include border-radius; } 這個時候編譯出來的 CSS: button { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
在 Sass 中，使用“@mixin”來聲明一個混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }查看全部
-
sass 的默認(rèn)變量僅需要在值后面加上 !default 即可。默認(rèn)變量對于組件化開發(fā)很有用。查看全部
-
避免選擇器嵌套： 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現(xiàn)效果。 選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現(xiàn)混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。查看全部
-
Sass 中的占位符 %placeholder 功能：可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼。 %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } 這段代碼沒有被 @extend 調(diào)用，他并沒有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調(diào)用才會產(chǎn)生代碼： //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 編譯出來的CSS //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } 從編譯出來的 CSS 代碼可以看出，通過 @extend 調(diào)用的占位符，編譯出來的代碼會將相同的代碼合并在一起。查看全部
-
Sass 在調(diào)用相同的混合宏時，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。 如下所示： //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 編譯出來之后： //CSS .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; } .btn-second { background-clor: orange; color: #fff; } 從示例代碼可以看出，在 Sass 中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器： .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }查看全部
-
混合宏在實際編碼中給我們帶來很多方便之處，特別是對于復(fù)用重復(fù)代碼塊。但其最大的不足之處是會生成冗余的代碼塊。 Sass 在調(diào)用相同的混合宏時，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。查看全部
-
Sass 混合宏除了能傳一個參數(shù)之外，還可以傳多個參數(shù)，如： @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } 在混合宏“center”就傳了多個參數(shù)。在實際調(diào)用和其調(diào)用其他混合宏是一樣的： .box-center { @include center(500px,300px); } 有一個特別的參數(shù)“…”。當(dāng)混合宏傳的參數(shù)過多之時，可以使用參數(shù)來替代，如： @mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } } 在實際調(diào)用中： .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }查看全部
-
在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個默認(rèn)值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認(rèn)值“3px”。 在調(diào)用類似這樣的混合宏時，會多有一個機會，假設(shè)你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調(diào)用默認(rèn)的混合宏“border-radius”: .btn { @include border-radius; } 但有的時候，頁面中有些元素的圓角值不一樣，那么可以隨機給混合宏傳值，如： .box { @include border-radius(50%); }查看全部
-
Sass 的混合宏有一個強大的功能，可以傳參，那么在 Sass 中傳參主要有以下幾種情形： A) 傳一個不帶值的參數(shù) 在混合宏中，可以傳一個不帶任何值的參數(shù)，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定義了一個不帶任何值的參數(shù)“$radius”。 在調(diào)用的時候可以給這個混合宏傳一個參數(shù)值： .box { @include border-radius(3px); } 這里表示給混合宏傳遞了一個“border-radius”的值為“3px”查看全部
-
1、聲明混合宏 不帶參數(shù)混合宏： 在 Sass 中，使用“@mixin”來聲明一個混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用來聲明混合宏的關(guān)鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復(fù)用的樣式代碼。 帶參數(shù)混合宏： 除了聲明一個不帶參數(shù)的混合宏之外，還可以在定義混合宏時帶有參數(shù)，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 帶參數(shù)混合宏： 除了聲明一個不帶參數(shù)的混合宏之外，還可以在定義混合宏時帶有參數(shù)，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 復(fù)雜的混合宏： 上面是一個簡單的定義混合宏的方法，當(dāng)然， Sass 中的混合宏還提供更為復(fù)雜的，你可以在大括號里面寫上帶有邏輯關(guān)系，幫助更好的做你想做的事情,如： @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } } 這個 box-shadow 的混合宏，帶有多個參數(shù)，這個時候可以使用“ … ”來替代。簡單的解釋一下，當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時，表示有多個陰影值，反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”查看全部
-
偽類嵌套和屬性嵌套非常類似，只不過他需要借助`&`符號一起配合使用。 避免選擇器嵌套： 1、選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現(xiàn)效果。 2、選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現(xiàn)混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。 為了防止此類情況，我們應(yīng)該盡可能避免選擇器嵌套。查看全部
-
scss默認(rèn)的編譯方式是nested這樣的編譯方式查看全部
舉報
0/150
提交
取消