html - 嵌套 SCSS 并定位父级

Question

我嵌套了很多 SCSS，我可以使用 & 定位父元素，但在这种情况下，这让我很头疼!我觉得我错过了一些很明显的东西，但我无法让它发挥作用。这是我的(简化的)SCSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;
}

基本上我使用的是图标字体，我希望图标(使用 :before 元素添加)看起来比它所附加的文本更亮 - 很好。

现在我想在应用此类的某些元素上覆盖它。我已经尝试遵循(如下)，它确实从目标元素中删除了不透明度……但它似乎也取消了每个元素上的 opacity: .50;。所以基本上所有东西都设置了 opacity: 1;。

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;

    @at-root {

        .btn#{&} {
            opacity: 1;
        }
    }
}

有什么想法吗？

Answer 1

你想要的是下面的SCSS:

[class^="icon--"],
[class*=" icon--"] {
  &:before {
    opacity: .50;
  }    
  &.btn  {
    &:before {
      opacity: 1;
    }
  }
}

渲染到这个 CSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"].btn:before,
[class*=" icon--"].btn:before {
  opacity: 1;
}

& 引用到目前为止将在您的嵌套级别中构建的选择器(不一定只是父级，仅当嵌套级别为一个时)。

您的尝试将创建此 CSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"]:before.btn,
[class*=" icon--"]:before.btn {
  opacity: 1;
}

这会在伪元素 :before 上期望一个类 .btn(你不能拥有)。

您可以轻松查看 sassmeister.com .这是关于 the almighty ampersand in SCSS 的一篇非常有用的文章.