Sass中的混合宏、继承和占位符
一、混合宏
1.不带参数的混合宏
@mixin border-radius {
-webkit-border-radius: 5px;
border-radius: 5px;
}
.btn {
@include border-radius
}
2.带参数的混合宏
@mixin border-radius($radius:5px) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
3.复杂的混合宏
当混合宏传的参数过多之时，可以使用 ... 来替代
@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.混合宏的不足
对于复用重复代码块，会生成冗余的代码块
栗子
.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调用相同的混合宏，并不能智能得将相同的代码块合并在一起。
二、继承
// 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的继承将选择器进行了合并，存在基类
三、占位符 %
// 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;
}
通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起
四、三者的区别
