SCSS 规则继承与 LESS 的比较

Question

我习惯使用 LESS，但我目前正在使用 SCSS。

在 Less 中，我可以做到以下几点：

.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { .sidebar_styles; }

SCSS 等价物是：

.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { @extend .sidebar_styles; }

我问，因为我正在使用 Foundation 框架，并且我试图不在 html 中使用表示类。我注意到 Chrome 运行缓慢并打开了检查器。某些元素的匹配 css 规则很大。

在 Chrome 挂起之前，我可以从其中一个元素复制大约 5% 的内容。 .row.collapse .column, body.full_width div[role="main"] form .row.collapse .column, body.two_columns div[role="main"] form .row.collapse .column, body.homepage div[role="main"] .hero_container form .row.collapse .column, .row form .collapse.top_bar .column, .top_bar form .collapse.top_bar .column, header[role="banner"] form .collapse.top_bar .column, footer[role="contentinfo"] form .collapse.top_bar .column, body.full_width div[role="main"] form .collapse.top_bar .column, body.two_columns div[role="main"]

Answer 1

@extend 将 css 选择器组合在逗号分隔列表中。如果您在 @extend 之后添加其他规则，它将保留这些规则作为它自己的选择器。

scss

.sidebar_styles {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    @extend .sidebar_styles;
    color: black;
}

css 输出

.sidebar_styles, aside[role="complementary"] {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    color: black;
}

如果你想保持规则分离，那么你可以使用 mixin 并将其包含在规则中。

scss

@mixin test {
    background: red;
    border: 1px solid blue;
}

.sidebar_styles {
    @include test;
}

aside[role="complementary"] {
    @include test;
}

css 输出

.sidebar_styles {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    background: red;
    border: 1px solid blue;
}