Sass 使用降压重构SCS

比方说，我想实现这一目标：

#page {
  p {
    margin: 10px 20px;
    color: white;
    padding: 10px;
  }
  #form {
    p {
    color: gray;
    }
  }
}

您会注意到，所有页面中的p都应该具有常规样式。但是页面表单除了颜色外，应该继承一般的p

有没有更好的方法写这个

谢谢。

不，是样式属性

---

您可以将页面p样式限制为仅为页面>页面p的页面的直接后代的段落，否则页面p将必然匹配页面表单p匹配的所有段落。页面p样式将应用于这些元素，如果要使用页面表单p撤消这些样式，则必须显式指定要显示的样式。

可以使用@extend，但不能在继承的选择器上使用

您可以使用@extend-only选择器，如下所示：

#page {
    %common_p {
        margin: 10px 20px;
        color: white;
        padding: 10px;
    }

    p {
        @extend %common_p;
    }

    #form {
        p {
            @extend %common_p;
            color: gray;
        }
    }
}

哪个输出为

#page p, #page #form p {
  margin: 10px 20px;
  color: white;
  padding: 10px; }
#page #form p {
  color: gray; }

我希望这能实现你的愿望

但我不确定这是否更好，因为层叠，表单中的任何p标记都已经得到了页面的p标记。例如，他们将获得边距、填充和颜色，但颜色将被覆盖

这只会迫使发生这种情况，即使级联并没有发生，例如表单存在于页面之外。如果是这样的话，那么这种技术会更好，因为SASS将组合这些样式以减少输出的重复性

您可以阅读更多关于@extend正在做什么的信息