代码之家 › 专栏 › 技术社区 › Kamafeather Thalaivar

@内容VS正常附加规则

mixins sass css

Kamafeather Thalaivar · 技术社区 · 9 年前

执行以下操作之间的区别是什么:

@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有什么不同吗?

我看不出 @内容 指令。

1 回复 | 直到 9 年前

Community holdenweb 7 年前

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

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

.foo {
    color: red;

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

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前