SASS Ampersand - 使用父选择器'＆amp;'链接CSS类就像在LESS

Question

LESS（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。它没有按预期工作，因为在SASS中没有以相同的方式实现特定的LESS功能。

如果您想要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中定义的所有规则，但有些规则非常适合使用。