css - SASS Ampersand——将 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;
}