Question

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

.class-name

.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）。

Answer 1

它不是嵌套，它的两个不同的元素，尝试如下所示实现

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

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

或以嵌套方式

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

无法target parent class from child

从此Answer

获取更多详细信息

Answer 2

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

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

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

就我个人而言，我觉得阅读并不令人愉快，而且通过文件中的ctrl + f找到更重要的难度（如果你没有源图）

编辑：如果整个块嵌套到其他内容中将会中断...

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

2 个答案: