避免SCSS规则重复

Question

我有一个文件,为边框阴影,渐变等定义了几个CSS3规则.
为了可比性,我需要behavior: url('/assets/css3pie.htc');在IE中添加for支持.

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

我的大多数CSS3都添加了行为规则,如border-shadow,gradient和border-radius.

不幸的是我注意到在输出中当我使用两个或更多CSS3规则时,我最终会得到不止一个behavior: 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 be overwritten属性是一个错误.

解决问题最漂亮的方法是删除behavior定义属性并定义css3piemixin,如下所示:

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

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

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