混合器

混合器

混合器使用@mixin标识符定义, 通过@include来使用这个混合器。

@mixin main-color {
    color: #00f;
}

main{
    font-size: 30px;
    @include main-color;
}

5-1. 何时使用混合器

你是否为这个混合器想出一个好名字，如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往能够构造一个合适的混合器。

5-2. 混合器中的CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。

@mixin demo-style {
    color: #00f;
    ul {
        li {
            border: 1px solid #f00;
        }
    }
}

main {
    font-size: 30px;
    @include demo-style;
}

混合器中的规则甚至可以使用sass的父选择器标识符&

5-3.给混合器传参

混合器可以通过在@include混合器时给混合器传参,来制定混合器生成的精确样式。

    <main>
      <a href="https://www.baidu.com">百度一下</a>
    </main>

@mixin link-colors($normal, $hover, $visited) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

main {
    font-size: 30px;
    a {
        @include link-colors($normal: blue, $hover: green, $visited: red);
    }
}

5-4. 默认参数值

给参数制定一个默认值，参数默认值使用$name:default-value的声明形式。

    <main>
      <a href="https://www.baidu.com">百度一下</a>
    </main>

@mixin link-colors($normal, $hover, $visited: red) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

main {
    font-size: 30px;
    a {
        @include link-colors($normal: blue, $hover: green);
    }
}