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

Question

有一段代码：

.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_errorclass 的 div ，它会有红色边框颜色，但这对我来说不好。我需要为 div 设置红色边框颜色（如果它同时具有number__icon-container_error和类）。number__icon-container_focus我该怎么做？谢谢！

Answer 1

您想要获得选择器： .number__icon-container_error.number__icon-container_focus从此类开始.number__icon-container。

您需要的是插值括号 #{}，因为两个接触的 & 符号在 Sass 中无效。 这是 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;
}