sass - 降压重构 SCSS

Question

假设我想实现这一目标：

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

你会注意到pin all#page应该有一般的风格。但是#page #form应该继承一般的p除外color。

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

谢谢。

Answer 1

您可以使用@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 会结合样式以减少输出的重复性。

您可以在http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders阅读更多关于 @extend 正在做什么

Answer 2

不，没有办法恢复样式属性的“默认”值。

您可以将样式限制为仅与with#page p直接后代的那些段落，否则将必然匹配所有匹配的段落。样式将应用于这些元素，如果您想使用 撤消它们，则必须明确指定您希望它们出现的样式。#page#page > p#page p#page #form p#page p#page #form p