@content VS 普通附加规则

Question

做的有什么区别：

@mixin test($color: #000) {
    border: 1px solid red;
    color: $color;
}

@mixin extension($color: #000) {
    @include test($color);
    background-color: #eee;
}

或执行以下操作？

@mixin test($color: #000) {
    border: 1px solid red;
    color: $color;

    @content
}

@mixin extension($color: #000) {
    @include test($color) {
        background-color: #eee;
    }
}

结果有什么不同吗CSS？

我看不出 @content 指令的便利性。

Answer 1

@content 指令允许您在 mixin 中有一个选择器，并在该选择器中注入特定的样式。最常见的用例是媒体查询：

@mixin bp($i) {
    @media (min-width: $i) {
        @content;
    }
}

.foo {
    color: red;

    @include bp(30em) {
        color: green;
    }
}

其他流行的用途包括抽象 keyframes declarations, placeholder selectors，或其他需要前缀的选择器。

@content VS 普通附加规则

@content VS normal additional rules

css

sass

mixins