sass - 避免 SCSS 规则重复

Question

我有一个文件，其中定义了一些用于边框阴影、渐变等的 CSS3 规则。
为了比较，我需要添加 behavior: url('/assets/css3pie.htc'); 以支持 IE。

@mixin box-shadow($props) {
  -webkit-box-shadow: #{$props};
     -moz-box-shadow: #{$props};
          box-shadow: #{$props};
  behavior: url('/assets/css3pie.htc');
}

为我的大部分 CSS3 添加了行为规则，例如 border-shadow、gradients 和 border-radius。

不幸的是，我注意到在输出中，当我使用两个或多个 CSS3 规则时，我也以 多个 行为结束:url('/assets/css3pie. htc'); 给定对象的规则。

示例输出是:

button {
-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  behavior: url("/assets/css3pie.htc"); # first time defined by the border-radius rule
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  behavior: url("/assets/css3pie.htc"); # second time, defined from the box-shadow rule
}

哪个是最好的解决方案？有没有办法检查继承树以及规则是否已经定义？

Answer 1

看起来这是一个 SCSS 错误。

大多数属性在类似情况下会被覆盖，但有些属性可以多次定义，如 background。

这就是为什么它不是 SCSS 覆盖规则的默认行为。 behavior 属性未定义为 should beoverwritten 属性的原因是一个错误。

解决这个问题的最好方法是删除 behavior 定义属性并定义一个 css3pie 混合宏，如下所示:

@mixin css3pie() {
  behavior: url('/assets/css3pie.htc');
}

然后要使用它，请将以下行添加到每个启用 CSS3 的元素:

.css3-enabled-element {
  @include css3pie;
}