1.@extend关键字,通过一个选择器来继承另一个选择器的样式,说白了,就是公用的css代码复用
/* sass 文件 */
/* 公用样式 */
.button {
background-color: blue;
color: white;
}
/* 下面直接使用@extend .button 复制上面的样式 */
.submit-button {
@extend .button;
font-size: 16px;
}
/* 通过编译后的css文件 */
.button,.submit-button {
background-color: blue;
color: white;
}
.submit-button {
font-size: 16px;
}
2.mixin混入的用法 @mixin与@include
/* sass文件 */
/* 定义一个公共的样式 */
@mixin common-style {
background-color: blue;
color: white;
font-size: 16px;
}
.button {
@include common-style;
}
.submit-button {
@include common-style;
font-weight: bold;
}
/* 编译后的css文件 */
.button {
background-color: blue;
color: white;
font-size: 16px;
}
.submit-button {
background-color: blue;
color: white;
font-size: 16px;
font-weight: bold;
}
相对于@extend而言 @mixin明显代码体积大一点,会冗余一点,但是我们一般都是维护sass文件,所以对于代码体积没有要求而言,影响可忽略不计
3.@mixin传参的用法
/* 定义一个common-style公用的类名,三个形参 */
@mixin common-style($background-color, $text-color, $font-size) {
background-color: $background-color;
color: $text-color;
font-size: $font-size;
}
/* 使用时 传入相对应的实参 */
.button {
@include common-style(blue, white, 16px);
}
.submit-button {
@include common-style(green, black, 14px);
}
/* 编译后的css文件 */
.button {
background-color: blue;
color: white;
font-size: 16px;
}
.submit-button {
background-color: green;
color: black;
font-size: 14px;
}