同一项目中两个类的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_error类的div，它将具有红色边框颜色，但对我不利。如果div同时具有number__icon-container_error和number__icon-container_focus类，则需要为div设置红色边框颜色。我该怎么做？谢谢！

Answer 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;
}