SASS混合器、继承、运算、函数

一、混合器@minxin

1、混合器的使用

混合器使用@mixin来定义

// 混合器的定义：@mixin 混合器的名称{代码}
@mixin a_0 {
    text-decoration: none;
    font-family: "宋体";
    font-size: 18px;
}

通过@include来调用(引用)混合器

.nav{
    color: red;
    // 使用 @include 混合器实现混合器的使用 用于引用(调用)混合器
    @include a_0();
}
.list{
    color: green;
    @include a_0();
}

2、给混合器传参

可以通过@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。跟JavaScript中的function很像

// 带有参数的混合器
@mixin color($bgcolor,$border_color) {
    background-color: $bgcolor;
    border: 1px solid $border_color;
    color: $border_color;
}

当混合器被@include时，可以把它当做一个css函数来传参，例如：

.btn-default{
    @include btn();