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

Answer 2

@Carlos，请试试这个。我希望这能解决你的要求

$selectorVar:'null' !default;
.i-style{
  border:solid 1px black;

  // build selector string
  $selectorVar: div+& !global;
  //$selectorVar: div+&, span+& !global; - for multiple selectors
}

#{$selectorVar} {
 border-color:red;
}

这会生成类似

的输出

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

div.i-style {
  border-color: red;
}

注意：通常，我不会污染全局命名空间！如果有帮助，请接受此答案

区分风格取决于使用SASS选择

2 个答案: