'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 |