How could apply CSS property on class and element specific at same time with SCSS?-CodePudding

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 >Lorem ipsum dolor sit amet</div>
<span >Lorem ipsum dolor sit amet</span>

Please help.

CodePudding user response：

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

CodePudding user response：

You can use speudo class :is,

.content {
  padding-left: 30px;
  &:is(span) {
    color: red;
  }
}