在 SCSS 中将标签名称嵌套到类样式中

Question

我想<a>在 class 中嵌套标签的选择器.class-name，以便仅将这些样式应用于同时具有<a>标签和.class-name使用 SCSS的类的元素。我想做的事情可以通过以下方式执行：

.class-name {
  font-size: 40px;
 }
 
 a.class-name {
   color: #ff6666;
 }

<div class="class-name">Hello</div>
<a class="class-name" href="#">World!</a>

我使用&父选择器在 SCSS 中尝试了两种不同的方法

# successfully transpiled but no change
.class-name {
  font-size: 40px;
  &a {
    color: #ff6666;
  }
}

# Got an error trying to transpile
.class-name {
  font-size: 40px;
  a& {
    color: #ff6666;
  }
}

我不希望巢周围（另一路.class-name内a）。

Answer 1

我认为你必须使用Sass 的 @-root。

.class-name {
  font-size: 40px;

  @at-root {
    a#{&} {
      color: #ff6666;
    }
  }
}

就我个人而言，我觉得阅读起来不太愉快，更重要的是，通过 ctrl+f 在文件中查找更困难（如果您没有源映射）

编辑：如果整个块嵌套在其他东西中，就会中断......

Answer 2

它不是嵌套，它是两个不同的元素，尝试如下实现你想要的

.class-name {
  font-size: 40px;
}

a.class-name {
  color: #ff6666;
}

或者以嵌套的方式

a{
   &.class-name{
    color: #ff6666;
   }
}

不可能 target parent class from child

从这个答案中获取更多详细信息