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.
