SASS的混合使用

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

SASS的混合使用 

1. 混合器（Mixin）用于定义可重复使用的样式

 使用 @include 引用混合器样式，需要在其后添加混合器名称。

@mixin tt {
    text-decoration: none;
    font-family: "楷体";
}

div {
    .re {
        color: aqua;
        @include tt;
    }
    .qw {
        color: blue;
        @include tt;
    }
    .tr {
        color: goldenrod;
        @include tt;
    }

2 参数用于给混合器中的样式设定变量，并且赋值使用.

 @Mixin..名字(参数,参数,){ }

@include..名字()   调用

$f:$a为默认值

  @mixin we($a, $b, $c, $d, $f:$a) {

        background-color: $a;

        color: $b;

        border: $d solid $c;

    }

    .yy {

        @include we(blue, green, aqua, 5px);

    }

    .sd {

        @include we(blue, green, green, 5px);

    }

3.@extend 继承

@extend 的作用是将重复使用的样式 ,给需要包含这个样式的特殊样式.

@mixin btn {

    color: red;

    background-color: aqua;

    border: 1px green solid;

}

.btn-a {

    @extend .btn;

    @include btn;

}

.btn-b {

    @extend .btn;

    @include btn;

}