SASS-Ampersand–；将CSS类与父选择器'&'；喜欢少一点 减（CSS）

考虑我用

//..

突出显示的那一行

我希望在SASS（.scss）中得到相同的结果。可能吗

预期结果应为：

.rtl.app #page .inner .left.padding-left-10px {}

而不是

.rtl .app #page .inner .left.padding-left-10px {}

---

谢谢。

看起来您正试图通过使用父选择器尽可能少地使用该功能。它没有像预期的那样工作，因为特定的LESS特性在SASS中的实现方式不同

如果希望在SASS中使用等效的输出代码，则可以使用，以便将选择器的作用域设置为根。然后您还需要为父选择器使用（即，

.rtl{&}

）：

.app {
  #page {
    .inner {
      .left {
        &.padding-left-10px {
          padding-left: 10px;

          @at-root {
            .rtl#{&} {
              padding-left: 0;
              padding-right: 10px;
            }
          }
        }
      }
    }
  }
}

这将编译为：

.app #page .inner .left.padding-left-10px {
  padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
  padding-left: 0;
  padding-right: 10px;
}

---

乔希给了你一个答案，我想这会有用的。但我还是想给你一些建议，那就是调查一下，或者以某种方式。像这样筑巢真的没有必要

您的代码在可读性方面可能会更好

例如：

.padding {
     padding: 10px;
 }

 .padding--left { // This is a modifier for padding
     padding: 0 0 0 10px;
 }

 .padding--right { // This is a modifier for padding
     padding: 0 10px 0 0;
 }

 <div class="padding padding--left">Using it in a div</div>

.padding{
填充：10px；
}
.padding--left{//这是填充的修饰符
填充：0 10px；
}
.padding--right{//这是用于填充的修饰符
填充：0 10px 0 0；
}
在div中使用它

---

您不必遵循BEM中定义的所有规则，但有些规则非常好用。

在

.rtl

和

&

之间留出一个空格

.rtl&{

与是一个文字字符串concatenation@ntgCleaner，您看到之前的行了吗？在描述中？我希望在Sass中以相同的语法输出

.rtl.app

。抱歉，我阅读了预期的和“and not”相反！查看itThanks@Josh以获得快速答案。让我尝试一下。非常感谢@Josh。这对我来说很有效。但我仍然在寻找一种方法，而不是根目录下的

>

指令……您的评论很有意义，非常感谢您的建议。但有时我们无法控制HTML结构，无法通过spe覆盖CSS具体来说，我们必须遵循更深层的层次结构。请注意，这可以写成

.padding{&{&}--left{…}

等

.padding {
     padding: 10px;
 }

 .padding--left { // This is a modifier for padding
     padding: 0 0 0 10px;
 }

 .padding--right { // This is a modifier for padding
     padding: 0 10px 0 0;
 }

 <div class="padding padding--left">Using it in a div</div>