Sass - 如果类有这个父级[重复]答案

【问题标题】：Sass - if class has this parent [duplicate]Sass - 如果类有这个父级[重复]
【发布时间】：2015-06-23 08:15:20
【问题描述】：

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

【问题讨论】：

@cimmanon 类似/相同的问题 - 有更好的标题。我的可能格式和姿势更好
这和什么有什么关系？重复就是重复，重复应该关闭。另一位关系密切的选民根本不知道你在问什么，所以它的措辞显然没有你想象的那么好。
@cimmanon 问题很明确。如果应该关闭所有重复项，为什么不将链接的副本作为“更好的副本”的副本关闭..？
@JoshCrozier 为什么要重新打开重复项？
@cimmanon 您最初将其关闭为 this 的骗子，所以我只是想找到 this 一个。另外，我只是在搜索其他问题时偶然发现了这个问题related duplicates...你还好吗？

标签： css sass

【解决方案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;
}

【讨论】：

将不胜感激解释反对票的评论...这会输出所需的结果，如here所示。
我没有投反对票，似乎产生了我想要的结果。