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

&引用将在您的嵌套级别中构建的选择器（不一定只是父级，只有嵌套级别为1）。

您的尝试会创建此CSS：

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

对于伪元素.btn（你不能拥有），期望一个类:before。

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

Answer 2

我对SCSS并不熟悉，但看起来你正试图瞄准

[class*=" icon--"]:before.btn

伪元素中的类btn，这可能是问题