1似炎、繼承和占位符
兩者都是通過
@extend來引用辛萍。
1.1 繼承
一個已經(jīng)存在的css樣式類，可以被其他樣式類繼承羡藐。
例如贩毕，實現(xiàn)以下css樣式：
.btn, .btn--primary, .btn--info {
border: 1px solid blue; }
.btn--primary {
color: black; }
.btn--info {
color: gray; }
scss中可以這樣寫，顯然仆嗦，這種寫法便于維護(hù)和閱讀辉阶！
.btn {
border: 1px solid blue;
}
.btn--primary {
color: black;
@extend .btn;
}
.btn--info {
color: gray;
@extend .btn;
}
1.2 占位符
顧名思義，如果不被
extend引用瘩扼，它是不會被編譯谆甜，也就是：不會占用css文件大小。這是和繼承最大區(qū)別集绰。
scss代碼如下：
%btn {
border: 1px solid blue;
}
// 沒有被extend
// 不會出現(xiàn)在css文件中
%test-btn {
border: 1px solid black;
}
.btn--primary {
color: black;
@extend %btn;
}
.btn--info {
color: gray;
@extend %btn;
}
編譯后的css代碼：
.btn--primary, .btn--info {
border: 1px solid blue; }
.btn--primary {
color: black; }
.btn--info {
color: gray; }
2. 混合宏
scss中的函數(shù)规辱，通過關(guān)鍵字
@mixin聲明，@include引用倒慧。
2.1 參數(shù)設(shè)置和調(diào)用方式
無參調(diào)用
scss：
@mixin btn {
border-radius : 3px;
}
.box {
color: white;
@include btn;
}
css：
.box {
color: white;
border-radius: 3px; }
參數(shù)調(diào)用
scss:
$radius:3px !default;
@mixin btn($radius:5px) { // 默認(rèn)是 5px
border-radius : $radius;
}
.box {
color: white;
@include btn($radius); // 傳入?yún)?shù)
}
css:
.box {
color: white;
border-radius: 3px; }
參數(shù)過多的情況
當(dāng)參數(shù)2按摘、3個時候，可以通過
@mixin size($width,$height)這樣來調(diào)用纫谅。當(dāng)參數(shù)過多炫贤，使用...符號。
scss:
$height: 15px !default;
$width: 18px !default;
@mixin size($list...) {
@if length($list) == 0 {
height: $height;
width: $width;
}@else if length($list) == 1 {
height: $list;
width: $list;
}@else if length($list) == 2 {
height: nth($list , 1);
width: nth($list , 2);
}@else {
@debug "Too many parameters";
}
}
.btn--primary {
@include size();
}
.btn--big {
@include size(20px , 25px);
}
.btn--square {
@include size( 18px );
}
.btn--test {
@include size(1px,2px,3px,4px); // just a test. console output "Too many parameters" what we have defined.
}
輸出的css結(jié)果：
.btn--primary {
height: 15px;
width: 18px; }
.btn--big {
height: 20px;
width: 25px; }
.btn--square {
height: 18px;
width: 18px; }
2.2 好處和不足
混合宏最大的不足：會復(fù)用代碼付秕，造成css冗贅（可以嘗試一下下方的測試代碼）兰珍。
當(dāng)然，符合宏可以傳遞參數(shù)這點很nice询吴。
可以編譯下方代碼掠河，觀察下結(jié)果：
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
3. 版本
- scss:3.5.6
- ruby:2.4.4p296
歡迎技術(shù)交流，引用請注明出處猛计。
個人網(wǎng)站：godbmw.com
Github：godbmw
