SASS：将类附加到与号运算符[重复]

Question

这个问题已经在这里有了答案：

• 将父选择器附加到Sass 1答案 的末尾

我当前的SASS如下所示：

   .container {
      width: 200px;

      .element {
        color: red;
      }
   }

我想实现的是，只有具有.small类的容器才具有color：blue元素。 我已经尝试了以下方法，但这不起作用：

.container {
          width: 200px;

          .element {
            color: red;

            .small& {
              color: blue
            }
          }
       } 

我想要的编译是： .small.container .element { color: blue }

我该如何实现？

Answer 1

您应该考虑像这样重新排列您的scs：

.container {
  width: 200px;

  .element
  {
    color: red;
  }

  &.small .element
  {
    color: blue;
  }
} 

这将输出以下CSS：

.container {
  width: 200px;
}
.container .element {
  color: red;
}
.container.small .element {
  color: blue;
}

在这里阅读有关sass的父引用选择器的信息

Answer 2

如果我没有正确理解....

.container {
  width: 200px;
  .element {
      color: blue;
  }
  &.small .element{
    color: red;
  }
} 

编译为：

.container {
  width: 200px;
}
.container .element {
  color: blue;
}
.container.small .element {
  color: red;
}

希望这会有所帮助