同一项目上的两个类的 Scss 选择器答案

【问题标题】：Scss selector for two classes on the same item同一项目上的两个类的 Scss 选择器
【发布时间】：2019-07-04 00:21:34
【问题描述】：

有一段代码：

.number__icon-container {
   display: flex;
   align-items: center;
   border-bottom: 1px solid;
   padding-left: 8rem;
   border-color: black.

   &_error  {
      border-color: red;
   }
}

如果有一些带有number__icon-container_error 类的 div，它将具有红色边框颜色，但这对我不利。如果它同时具有number__icon-container_error 和number__icon-container_focus 类，我需要为 div 设置红色边框颜色。我该怎么做？谢谢！

【问题讨论】：

您好，您可以使用此选择器&_error#{&}_focus 代替&_error。
@AmauryHanser 这是正确答案 :) 我重新打开了这个问题，因为重复项实际上指向了错误的解决方案。
@Terry 嗨。但是您认为它需要作为答案发布吗？

标签： css sass

【解决方案1】：

你想得到选择器：.number__icon-container_error.number__icon-container_focus，从这个类开始.number__icon-container。

你需要的是插值括号#{}，因为两个接触的&符号在Sass中是无效的。 Here is an article on css-tricks.com.

你可以写：

  .number__icon-container {
    border-color: black;
      &_error#{&}_focus  { // See the use of the interpolation bracket ?
      border-color: red;
    }
  }

它会编译：

.number__icon-container {
  border-color: black;
}
.number__icon-container_error.number__icon-container_focus {
  border-color: red;
}

【讨论】：