SASS & 与父选择器“&”链接 CSS 类，就像在 LESS 中一样

Question

少（CSS）

see in action

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

          // rtl direction
          .rtl& {  //////////////////////////////////
            padding-left: 0;
            padding-right: 10px;
          }
        }
      }
    }
  }
}

考虑一下我用///.... 突出显示的那一行。

我希望在 SASS (.scss) 中得到相同的结果。有可能吗？

预期结果应该是：

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

而不是

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

谢谢。

Answer 1

您似乎正在尝试使用 LESS 功能，您可以通过使用父选择器来change the order of the selectors。它没有按预期工作，因为特定 LESS 功能在 SASS 中的实现方式不同。

如果您想要 SASS 中的等效输出代码，则可以使用 @at-root directive 将选择器范围限定为根。那么你还需要使用variable interpolation（即.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;
}

Answer 2

我猜乔希给了你一个可行的答案。但我仍然想给你一些建议，那就是看看BEM，或者以某种方式。这样的嵌套真的没必要。

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

例如：

.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>

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