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;
}

SCSS规则与LESS相比的继承

1 个答案: