Question

I have a file with defined a couple of CSS3 rules for border shadow, gradients and etc..
For comparability I need to add the behavior: url('/assets/css3pie.htc'); for support in IE.

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

The behavior rule is added for most of my CSS3 like border-shadow, gradients and border-radius.

Unfortunately I noticed that in the output when I use two or more of those CSS3 rules I also end up with more than one of the behavior: url('/assets/css3pie.htc'); rules for the given object.

An example output is:

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
}

Which is the best solution? Is there a way to check the inheritance tree and whether a rule is already defined?

Answer 1

It looks that it’a a SCSS bug.

Most of the properties will get overwritten in similar case, but there are some properties that can be defined more than one time like background.

That’s why it’s not an SCSS default behavior of overwriting rules. The reason why the behavior property isn’t defined like a should be overwritten property is a bug.

The prettiest way to solve the issue is by removing the behavior definition property and defining a css3pie mixin, like that:

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

Then to use it, add the following line to every CSS3 enabled element:

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