Less 相比之下，SCSS规则继承更少

我习惯于使用较少，但我目前正在使用SCS

在更少的时间里，我可以做到以下几点：

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

当我使用基础框架时，我试图在HTML中不使用演示类。我注意到Chrome运行缓慢，于是打开了检查器。某些元素的匹配css规则非常庞大

下面是我可以在Chrome挂起之前从其中一个元素复制的内容的5%。

---

.row.column.body.full_width div[role=“main”]form.row.column.body.two_column div[role=“main”]form.row.column.body.homepage div[role=“main”]div[role=“main”].hero_容器表单.row.column.column.row表单.column.column.column.column.column.column.column.column.column.column.columnform.collapse.top\u bar.column，footer[role=“contentinfo”]form.collapse.top\u bar.column，body.full\u width div[role=“main”]form.collapse.top\u bar.column，body.two\u columns div[role=“main”]
将css选择器分组在逗号分隔的列表中。如果在
@extend
之后添加其他规则，它将保留这些规则作为自己的选择器

scss

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

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

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

.sidebar_styles {
    @include test;
}

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

css输出

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

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

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

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

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

scss

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

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

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

.sidebar_styles {
    @include test;
}

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

css输出

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

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

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

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

我按照Zurb的指示使用@include，但它仍在创建大量选择器。这个问题从来没有少过