'Can I use @extend (SASS) method to a nested class and get the output without parent class?

HTML

<div class="main">
    <div class="first"></div>
</div>
<div class="second"></div>

SASS

.main
    background: #eee
    .first
        width: 100px
        height: 100px
        background: green

.second
    @extend .first

Combiled CSS

.main{
    background: #ccc;
}
.main .first, .main .second{
    width: 100px;
    height: 100px;
    background: green;
}
/* Output needed: .main .first, .second{... */

The class .second is not a child of class .main, so is it possible to get the output like .main .first, .second{... ?



Solution 1:[1]

You can use a placeholder selector and extend it in .first and .second:

%commonStyles
    width: 100px
    height: 100px
    background: green

.main
    background: #eee
    .first
        @extend %commonStyles

.second
    @extend %commonStyles

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arkellys