SCSS符号已编译完整的根元素而不仅仅是父元素

早上好/晚上好，亲爱的

我有一个SCS的问题，我尝试了不止一个场景，但没有达到我想要的

让我看看我的密码

这是我的SCSS代码

我希望被编辑

但我得到了这个

---

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

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

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

而不是：

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

以下是有关如何使用父选择器的良好教程：

我的建议是采用专家建议的解决方案

由于您多次使用相同的样式规则，因此也可以使用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;
            }
        }
    }
}

---

为什么不简单地说：？谢谢@Temani_af如果你是对的，但我的项目包含50多个scss文件，我不能再重写这些文件如果你不能重写它们，你将如何解决你的问题？你没有得到预期的结果，所以你需要改变

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

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

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