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，例如

@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;
            }
        }
    }
}

SCSS＆符编译的完整根元素不仅是父级

1 个答案: