1

我习惯使用 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"]

4

1 回答 1

2

@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;
}
于 2013-02-19T06:46:19.047 回答