混合器

混合器

混合器使用@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);
    }
}