Search code examples
sassprefix

SASS prefix custom element

I try to prefix a custom element that looks like this <myprefix-toggle></myprefix-toggle>. It does not work. However if I add # as if it would be an id it does compile. Why and how can I get around it?

Works

$prefix: "myprefix-";

#{$prefix}toggle {
  background: red;
}

Does not work

$prefix: "myprefix-";

{$prefix}toggle {
  background: red;
}

The error I get is probably not that related to the real issue...

Error: expected ':' after $prefix in assignment statement

If it's of importance I use gulp-sass to compile the sass to css.

Solution

  • The hashtag and the curly brackets is the Sass syntax for interpolation #{ ... } 

    $prefix: "myprefix-";

                            //  CSS output 
#{$prefix}toggle  { ... }   //  myprefix-toggle { ... }
.#{$prefix}toggle { ... }   // .myprefix-toggle { ... }
##{$prefix}toggle { ... }   // #myprefix-toggle { ... }