I've been using @extend rather than @include because it cuts down the size of css files by only defining styles once. However, I find myself falling into messy code:
What I'll do is define a set of classes that I expect to reuse a lot; e.g.: // (Using compass's border-radius mixin) .br-2-2-0-0 { @include border-radius(2px 2px 0 0); } .br-0-0-2-2 { @include border-radius(0 0 2px 2px); } .br-2-0-0-2 { @include border-radius(2px 0 0 2px); } .br-0-2-2-0 { @include border-radius(0 2px 2px 0); } As you can see, after a while this can get a little excessive as I end up having to manually define 10-20 classes just for border radius. Now I would love it if I could do something like this instead: #foo { @include my-border-radius(2px, 2px, 0, 0); } // ... which would define a top level class: .br-2px-2px-0-0 { @include border-radius(2px 2px 0 0); } // ... and extend the current selector with that class: #foo { @extend .br-2px-2px-0-0; } (https://gist.github.com/912518) That way I could achieve the space saving in my css files that I get with extend, without having to maintain a crazy collection of classes. Also, another problem with my @extend way is that it limits the reusability of the code. If I want to use the border-radius classes in more than one stylesheet I have to copy/paste the code, or I'll end up with a bunch of unused classes in my css. -- You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to haml@googlegroups.com. To unsubscribe from this group, send email to haml+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/haml?hl=en.