Question

I’m used to using LESS but im currently working with SCSS.

In Less I could do the following:

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

Would the SCSS equivalent be:

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

I ask as I am using the Foundation framework and I’m trying to not use presentation classes in the html. I noticed Chrome was running slowly and opened up the inspector. The matched css rules for some elements is huge.

Below is about 5% of what I could copy from one of the elements before Chrome hangs.
.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 will group the css selectors together in comma separated list. If you add additional rules after the @extend, it will keep those rules as it’s own selector.

scss

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

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

css output

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

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

If you want to keep the rules separated then you can use a mixin and include it in the rules.

scss

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

.sidebar_styles {
    @include test;
}

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

css output

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

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