Html 嵌套SCS并以父级为目标

我嵌套了很多scs，并且我能够使用

&

将父元素作为目标，但是在这个例子中，它让我头疼！我觉得我错过了一些很明显的东西，但我无法让它发挥作用。以下是我的（简化）SCS：

基本上，我使用的是图标字体，我希望图标（使用：before元素添加）看起来比它附加到的文本要轻-好

现在我想覆盖这个类应用到的某些元素。我尝试了以下方法（如下），这确实会从目标元素中移除不透明度…但它似乎也会抵消

不透明度：.50在每个元素上。所以基本上所有的东西都有不透明度：1设置

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

    @at-root {

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

有什么想法吗？
我对SCS不是很熟悉，但看起来你正试图瞄准它

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

伪元素中的一个类btn，这可能是问题所在
我对SCS不是很熟悉，但看起来您正试图将其作为目标

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

伪元素中的类btn，这可能是问题所在
您需要的是以下SCS：

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

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

&
引用到目前为止将在嵌套级别中构建的选择器（不一定只有父级，仅当嵌套级别为1时）

您的尝试将创建以下CSS：

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

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

它将在伪元素
：before
（您不能拥有）上预期类
.btn

你可以很容易地检查。这是一篇非常有用的文章。
您需要的是以下SCS：

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

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

&
引用到目前为止将在嵌套级别中构建的选择器（不一定只有父级，仅当嵌套级别为1时）

您的尝试将创建以下CSS：

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

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

它将在伪元素
：before
（您不能拥有）上预期类
.btn

你可以很容易地检查。这是一篇非常有用的文章。
嗨，是的，我只是这样举了一个例子。我在下面的评论中尝试了其他方法，例如使用
&
。只是无法让它以任何方式工作！嗨，是的，我只是这样举了个例子。我在下面的评论中尝试了其他方法，例如使用
&
。只是无法让它以任何方式工作！谢谢你的回复，我的例子只是我尝试过的一件事。我将在下面的评论中详细介绍。我认为您的版本不起作用，因为它在
.btn
和
[class^=“icon-->]：before
之间留出了一个空格。它必须是
.btn[class^=“icon--”]：在
之前-没有空格。我假设您使用的元素包含按钮中的class.btn。我会修改我的答案。不，对不起，我应该更清楚。对不起。不知什么原因，我努力解释自己！我试着在root{}
和
.btn{&}
上使用
@之类的东西，但显然这也不对，我对这些东西也很陌生。再次感谢您的回复！谢谢你，很抱歉迟了回复。我想我自己遇到了一个问题，我从
[class^=“icon-->]：before
开始，而不是像您在示例中那样嵌套
&:before
。我认为这可能是最好的处理方式！：）谢谢你的回复，我的例子只是我尝试过的一件事。我将在下面的评论中详细介绍。我认为您的版本不起作用，因为它在
.btn
和
[class^=“icon-->]：before
之间留出了一个空格。它必须是
.btn[class^=“icon--”]：在
之前-没有空格。我假设您使用的元素包含按钮中的class.btn。我会修改我的答案。不，对不起，我应该更清楚。对不起。不知什么原因，我努力解释自己！我试着在root{}
和
.btn{&}
上使用
@之类的东西，但显然这也不对，我对这些东西也很陌生。再次感谢您的回复！谢谢你，很抱歉迟了回复。我想我自己遇到了一个问题，我从
[class^=“icon-->]：before
开始，而不是像您在示例中那样嵌套
&:before
。我认为这可能是最好的处理方式！：）你的问题还没有解决吗？你的问题还没有解决吗？