css - SCSS Ampersand 已编译的完整根元素不仅是父元素

Question

亲爱的早上好/晚上好

我在使用 SCSS 时遇到问题，我尝试了比场景更多的方法，但没有达到我想要的效果。

让我展示一下我的代码

这是我的 SCSS 代码

     html[dir=rtl] {
        .wrapper {
            .layout-top-nav & {
            margin-left: unset;
            margin-right: 0;

            & .content-wrapper,
            & .main-header,
            & .main-footer {
              margin-left: unset;
              margin-right: 0;
            }
          }
        } 
    }

我希望编译

    html[dir=rtl] .layout-top-nav .wrapper {
      margin-left: unset;
      margin-right: 0;
    }

    html[dir=rtl] .layout-top-nav .wrapper .content-wrapper,
    html[dir=rtl] .layout-top-nav .wrapper .main-header,
    html[dir=rtl] .layout-top-nav .wrapper .main-footer {
      margin-left: unset;
      margin-right: 0;
    }

但我明白了

    .layout-top-nav html[dir=rtl] .wrapper {
      margin-left: unset;
      margin-right: 0;
    }

    .layout-top-nav html[dir=rtl] .wrapper .content-wrapper,
    .layout-top-nav html[dir=rtl] .wrapper .main-header,
    .layout-top-nav html[dir=rtl] .wrapper .main-footer {
      margin-left: unset;
      margin-right: 0;
    }

我的问题是:如何获得预期的输出？

Answer 1

您的方法的问题是，您试图使用父选择器 (&) 来仅引用直接父级。不幸的是，这在 scss 中是不可能的。当您使用 & 符号时，从根开始的所有前面的选择器首先被编译为复合选择器，然后 & 符号被这个选择器替换。这就是为什么你得到:

.layout-top-nav html[dir=rtl] .wrapper {...}

代替:

html[dir=rtl] .layout-top-nav .wrapper {...}

这是一个关于如何使用父选择器的很好的教程: https://css-tricks.com/the-sass-ampersand/

我的建议是采用 Temani Afif 建议的解决方案.

因为你多次使用相同的样式规则，你也可以使用混合，例如

@mixin margin-style {
  margin-left: unset;
  margin-right: 0;
}

html[dir=rtl] {
    .layout-top-nav {
        .wrapper {
            @include margin-style;

            .content-wrapper,
            .main-header,
            .main-footer {
                @include margin-style;
            }
        }
    }
}