2019-8-26 seo達人
避免選擇器嵌套：
選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現(xiàn)效果。
選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現(xiàn)混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。
混合宏
在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏，那么在實際調(diào)用中，其匹配了一個關鍵詞“@include”來調(diào)用聲明好的混合宏。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
繼承 @extend
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承。如下所示：
//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 中的占位符 %placeholder 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @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
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
藍藍設計( www.xintaizi.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。