Question

Sass是否有办法在没有显式类名的情况下使用嵌套元素？

采取这样的方式：

.foo {color: blue;}
p.foo {background: yellow;}
span.foo {background: red;}

<p class="foo">Styled paragraph text</p>
<span class="foo">Styled span text</span>

把它变成类似的东西：

.foo {
  color: blue;  

  & p {
    background: yellow;
  }

  & span {
    background: red;
  }

}

fiddle

Answer 1

根据this GitHub issue，您可以使用SASS v3.3.0中的以下内容：

.foo {
  color: blue;  
  @at-root {
    p#{&} {
      background: yellow;
    }
    span#{&} {
      background: red;
    }
  }
}

哪个输出：

.foo {
  color: blue;
}
p.foo {
  background: yellow;
}
span.foo {
  background: red;
}

Sass - 如果班级有这个父母

1 个答案: