Sass - 保持原始类嵌套答案

【问题标题】：Sass - Keep original class nestingSass - 保持原始类嵌套
【发布时间】：2020-05-09 22:48:06
【问题描述】：

抱歉标题不好，不知道如何命名。

当我在编译我的 scss 时，这个：

.foo {
  ...
  &__bar { ... }
}

它变成下面的代码，这是你所期望的：

.foo { ... }
.foo__bar { ... }

我的问题是我需要这样：

.foo { ... }
.foo .foo__bar { ... }

在 .foo__bar 之前使用 .foo 选择器。

是否有任何 Webpack 插件或其他解决方案可以帮助解决我的问题？

我找到了两种方法来实现这一点，但我想知道是否有什么可以让我免于额外的代码：

.foo {
  ...
  & &__bar { ... }
}

// or

.foo {
  ...
  .foo__bar { ... }
}

【问题讨论】：

【解决方案1】：

如果你打算得到这个

.foo { ... } .foo .foo__bar { ... }

你需要这样写你的scss：

.foo { …… &.foo__bar { ………… } }

请尝试一下，看看是否有效？

【讨论】：

对不起，您的回答没有帮助，甚至包含错误。如果你写：.foo { ...... &.foo__bar { ....... } } 你会得到：.foo {...} .foo.foo__bar { ....... } 不是我需要的，那就是：.foo {...} .foo .foo__bar { ....... } 差别很小，但它改变了一切。我知道我可以使用各种方法来编写代码来实现我所需要的，这不是问题。我正在寻找一些允许默认以这种方式编译我的代码的 Webpack 选项或插件。