Question

I’ve been struggling to make a coherent mixin for this issue. I’m using modernizr.js to detect features, and in an effort to keep my stylesheet lean I’ve been trying to push classes out of the nested structure and extend the classes that modernizr has put in.
I should add that I’m using Compass as well for the extra features.

What I’m hoping to achieve is this:

.csstransitions, .csstransitions div, .csstransitions .some-class{
  -moz-transition-property: background;
  -webkit-transition-property: background;
  -o-transition-property: background;
}

So far I have this, but it’s broken:

.csstransitions{
    @include transition-property(background-image);
}
@mixin csstransitions($element:"div"){
    @extend .csstransitions(nest(".csstransitions",$element));
}

The idea is that I can invoke the mixin from within the css structure…
Thanks

Answer 1

I think simple nesting should be good enough here, why do you need all this complexity with mixins and inheritance?

@import "compass/css3";
div {
  background-image: url(/images/foo.png);
  .csstransitions & {
    @include transition-property(background-image);
  }
}

This will give you the following output:

div {
  background-image: url(/images/foo.png);
}
.csstransitions div {
  -moz-transition-property: background-image;
  -webkit-transition-property: background-image;
  -o-transition-property: background-image;
  transition-property: background-image;
}

But as far as I can see, you don’t even need this scoping at all. A browser will ignore any property that it does not understand. So I suggest the following:

@import "compass/css3";
div {
  background-image: url(/images/foo.png);
  @include transition-property(background-image);
}