Question

假设我想实现这个目标：

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

您会注意到所有p中的#page应该具有一般风格。但#page #form应继承除p之外的一般color。

有没有更好的方法来写这个？

感谢。

Answer 1

不，there is no way to restore the "default" value表示样式属性。

您可以将#page p样式仅限制为#page与[{1}}的直接后代的段落，否则#page > p必须匹配#page p的所有段落} 火柴。 #page #form p样式将应用于这些元素，如果您想使用#page p撤消它们，则必须明确指定要显示的样式

Answer 2

您可以使用@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; }

我希望这能完成你想要的东西！

我不确定这是否更好，因为由于级联，＃form内的任何p标签也已经获得#page的p标签。例如。他们会得到边距，填充和颜色，但颜色会被覆盖。

这简单地强制发生，即使没有发生级联（例如，如果#form存在于#page之外）。如果是这种情况，那么这种技术会更好，因为SASS会将样式组合起来，使输出重复性降低。

您可以详细了解@extend在http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

所做的事情

使用降压重构SCSS

2 个答案: