Is it possible to set empty string as a class selector in sass?

Question

I have a variable which have empty string as default value and it can be changed dynamically based on skin name. So I tried to write my sass selector like this.

default.scss:

$skin: '';

green.scss:

$skin: 'green';

main.scss:

@import 'default.scss';
.#{$skin} .header{
    color: black;
}

So I expected the below output from generated CSS.

.header{
  color: black;
}

and

.green .header{
   color: black;
}

But it throws below error while compiling Invalid CSS after ".": expected class name, was ".header"

when $skin is empty your output is . .header so you could move the dot inside the variable — Fabrizio Calderan
@fcalderan: Thanks for the update. Is it possible to do this kind of requirement? — Yahwe Raj

somethinghere somethinghere · Accepted Answer · 2016-04-04T15:33:33

You could use a function for this:

$skin: 'green';
@function skin(){ 
    @if $skin != '' { @return '.' + $skin + ' '; } 
    @else { @return ''; }
}

Now you could use it like this:

#{skin()} .header { ... }

Which will output:

.green .header { display: block; }

It might be better to use a better global variable name (skin seems like something that might quickly be reused - I would suggest something like $global-skin-name or something, but thats just semantics).

Is it possible to set empty string as a class selector in sass?

1 Answers