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