Sass混合器的使用与继承的使用

Sass:

是一个 CSS 预处理器。 是CSS中的扩展语言，可以帮助我们减少 CSS 重复代码，节省开发的时间。

混合器传参数和默认参数

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。

1.定义@mixin

@mixin name {
    text-decoration: none;
    font-size: 20px;
}

2.引用 @include

.div1 {
    color: red;
    display: inline;
    width: 50px;
    height: 50px;
    @include name();
}

.div2 {
    text-decoration: none;
    font-family: '宋体';
    color: green;
    font-size: 16px;
    @include name();
}

//编译后的css

.div1{
    color:red;
    display:inline;
    width:50px;
    height:50px;
    text-decoration:none;
    font-size:20px
}
.div2{
    text-decoration:none;
    font-family:"宋体";
    color:green;
    font-size:16px;
    text-decoration:none;
    font-size:20px
}

混合器传参

​ sass在定义混合器时，可以提前定义好形参，然后在引用时，传递参数，生成特定样式。

//定义混合器
@mixin color($bgcolor, $width, $border-color) {
    background-color: $bgcolor;
    border: $width solid $border-color;
    color: $border-color;
}
//引用混合器
.btn1 {
    @include color(red, 10px, yellow);
}
//最终生成的css
.btn1 {
    background-color: red;
    border: 10px solid yellow;
    color: yellow;
}

继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.btn {
    width: 100px;
    height: 40px;
    border-radius: 10px;
}

.btn1 {
    @extend .btn;
    background-color: gainsboro;
    border: 1px solid gray;
    color: red;
}

css代码如下：

btn1{
    width:100px;
    height:40px;
    border-radius:10px;
    background-color:gainsboro;
    border:1px solid gray;
    color:red;
}