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正常的附加规则

1 个答案: