Generating smarter selectors

[Drahera]

Hi, I'm writing selectors based on a long list or names, such as
below:

@each $name in eva, maria, berit, gertrud, helga {
&.female-#{$name} { color:pink; }
}

This will generate something like this:

(context).female-eva { color:pink; }
(context).female-maria { color:pink; }
(context).female-berit { color:pink; }

and so on...

Is there a way to generate this instead?

(context).female-eva,
(context).female-maria,
(context).female-berit { color:pink; }

I've been experimenting with stuff like:

@mixin set_color($names, $color) {
@each $name in $names {
&.female-#{$name},
} {color:pink;}
}

But even if that would work in theory, the CSS last selector would end
with a comma thus being invalid. Anyone knows how to do this?

Thanks

[Nathan Weizenbaum]

This is moderately hacky, but:

$selectors: ();

@each $name in eva, maria, berit, gertrud, helga {

  $selectors: $selectors, unquote("&.female-#{$name}");

}

.context { #{$selectors} { color: pink } }

At some point in the future, Sass will have some optimization logic that will combine adjacent identical CSS rules to make this unnecessary.

--
You received this message because you are subscribed to the Google Groups "Sass" group.
To post to this group, send email to sass...@googlegroups.com.
To unsubscribe from this group, send email to sass-lang+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/sass-lang?hl=en.

[Drahera]

Thank you, I wen't with this approach and works well for me.

Use loop to create the selector list instead of creating the whole
rule - I like it. Doesn't really look readable at a first glance but
I'm happy anyways.

[Roy Tomeij]

Cool. I stole it: http://roy.io/ts3 :P

On Feb 7, 8:20 pm, Nathan Weizenbaum <nex...@gmail.com> wrote:

[BillSaysThis]

Amusingly, the TextMate (1 or 2) Sass bundle doesn't colorize this type of code properly.