Generating smarter selectors

146 views
Skip to first unread message

Drahera

unread,
Jan 24, 2012, 6:01:33 AM1/24/12
to Sass, andrew...@redbet.com, juan.ma...@redbet.com
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

unread,
Feb 7, 2012, 2:20:40 PM2/7/12
to sass...@googlegroups.com, andrew...@redbet.com, juan.ma...@redbet.com
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

unread,
Feb 27, 2012, 3:04:35 AM2/27/12
to Sass
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

unread,
Feb 28, 2012, 5:02:02 AM2/28/12
to Sass
Cool. I stole it: http://roy.io/ts3 :P

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

BillSaysThis

unread,
Feb 28, 2012, 5:30:46 PM2/28/12
to sass...@googlegroups.com
Amusingly, the TextMate (1 or 2) Sass bundle doesn't colorize this type of code properly.
Reply all
Reply to author
Forward
0 new messages