css - 区分样式取决于使用 SASS 进行选择

Question

我有一个名为i-style 的全局CSS 类。我想根据选择器更改其样式。我知道这可以通过使用类和 &. 选择器来完成。但我只想通过提供选择器来完成它。

例如

i-style{
 border:solid 1px black;
 &div{
  border-color:red;
} 
}

<span class="i-style"></span>
<div class="i-style"></div>

在这种情况下，div 应该有红色边框。

Answer 1

如果我理解你的问题，也许这对你有帮助:

SASS

.i-style{
  border:solid 1px black;
  @at-root div#{&}{
    border-color:red;
 } 
}

输出

.i-style {
  border: solid 1px black;
}
div.i-style {
  border-color: red;
}