Sass中的混合宏、繼承和占位符
一有额、混合宏
1.不帶參數(shù)的混合宏
@mixin border-radius {
????-webkit-border-radius: 5px;
????border-radius: 5px;
}
.btn {
????@include border-radius
}
2.帶參數(shù)的混合宏
@mixin border-radius($radius:5px) {
????-webkit-border-radius: $radius;
????border-radius: $radius;
}
3.復(fù)雜的混合宏
當(dāng)混合宏傳的參數(shù)過(guò)多之時(shí)般又，可以使用 ... 來(lái)替代
@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;
} }
.box {
????@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
4.混合宏的不足
對(duì)于復(fù)用重復(fù)代碼塊，會(huì)生成冗余的代碼塊
栗子
.scss
@mixin border-radius {
????-webkit-border-radius: 3px;
????border-radius: 3px;
}
.box {
? ? @include border-radius;
? ? @margin-bottom: 5px;
}
.btn {
? ? @include border-radius;
}
生成的.css
.box {
????-webkit-border-radius: 3px;
????border-radius: 3px;
????margin-bottom: 5px;
}
.btn {
????-webkit-border-radius: 3px;
????border-radius: 3px;
}
栗子中可以看出巍佑，scss調(diào)用相同的混合宏茴迁，并不能智能得將相同的代碼塊合并在一起。
二萤衰、繼承
// scss
.btn {
????border: 1px solid #ccc;
? ? padding: 6px 10px;
? ? font-size: 14px;
}
.btn-primary {
? ? background-color: #ff36;
????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;
}
scss的繼承將選擇器進(jì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;
}
通過(guò) @extend 調(diào)用的占位符，編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起
四倦卖、三者的區(qū)別
