SASS：将 class 附加到 & 运算符

Question

我目前的 SASS 看起来像这样：

   .container {
      width: 200px;

      .element {
        color: red;
      }
   }

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

.container {
          width: 200px;

          .element {
            color: red;

            .small& {
              color: blue
            }
          }
       }

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

我怎样才能做到这一点？

Answer 1

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

.container {
  width: 200px;

  .element
  {
    color: red;
  }

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

这将输出以下内容 css:

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

Read here about the parent referencing selector of sass

Answer 2

如果我没理解错的话....这个Sass:

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

编译为：

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

希望对您有所帮助

SASS：将 class 附加到 & 运算符

SASS: attach class to amperand operator

css

sass