通过SASS中的给定类将元素选择器指定为组合选择器

Question

我有以下案例：

.description {
  // styles
}

我想在之前使用Sass分配一个元素选择器。输出将是：

label.description { /* styles */ };

在课堂上以某种方式可以做到这一点：

.description {
  label&
}

类似于&组合子，但要把它放在课前。感谢

Answer 1

可以放置&以便引用父母，他们可以在@at-root中找到它：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

最后一行：

body.firefox & { font-weight: normal; }

编译为：

body.firefox a {font-weight: normal; }

您描述的语法（label&）会产生此错误：

  

“标签”后的CSS无效：预期“，是”＆amp;“

     

“＆安培;”只能在复合选择器的开头使用。

但是，有两种选择，一种是创建另一种规则：

label {
  &.description {/*styles*/};
}

另一个，与你想要的非常相似，使用interpolation和in this answer你可以写：

.description {
  @at-root label#{&} {/*styles*/}
}

这将产生：

label.description {
  /*styles*/
}

这是基于{{3}}。