As shown underneath, there are two (div & span) HTML element having same class (content ), but on span only, I want add color property. How it will be done in SCSS?
.content {
padding-left: 30px;
span#{&} {
color: red;
}
}<div class="content">Lorem ipsum dolor sit amet</div>
<span class="content">Lorem ipsum dolor sit amet</span>Please help.
Use @at-root which allows advanced nesting: https://sass-lang.com/documentation/at-rules/at-root
.content {
padding-left: 30px;
@at-root span#{&} {
color: red;
}
}
compiles into
.content {
padding-left: 30px;
}
span.content {
color: red;
}
You can use speudo class :is,
.content {
padding-left: 30px;
&:is(span) {
color: red;
}
}