Can I use variables for selectors?

css variables sass css-selectors
Johansrk picture Johansrk · Oct 5, 2012 · Viewed 27.3k times · Source

I have this variable:

$gutter: 10;

I want to use it in a selector like so SCSS:

.grid+$gutter {
    background: red;
}

so the output becomes CSS:

.grid10 {
    background: red;
}

But this doesn't work. Is it possible?

Answer

glortho picture glortho · Oct 8, 2012 
$gutter: 10;

.grid#{$gutter} {
    background: red;
}

If used in a string for example in a url:

background: url('/ui/all/fonts/#{$filename}.woff')

Related questions

Setting variable to @mixin in Sass?

Is there way to set @include mixin(); to variable? I tried this @mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){ background: $fallback; background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent); background: -moz-#{$type}-gradient($positionX $positionY, $…

Read More
How can I define colors as variables in CSS?

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just …

Read More
Modify alpha opacity of LESS variable

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this: background: lighten(@blue, 20%); I want to change the alpha opacity of my color, though. Preferably like this: background: alpha(@blue, 20%); …

Read More