SCSS规则继承与LESS相比

Question

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

在更短的，我可以做到以下几点：

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

如果你想保持分离，那么你可以使用一个混合的规则，包括它的规则。

SCSS

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

.sidebar_styles { 
    @include test; 
} 

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

CSS输出使用@include按Zurb的说明http://foundation.zurb.com/docs/sass-mixins.php

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

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