Пользовательский элемент префикса SASS

Question

Я пытаюсь добавить префикс пользовательского элемента, который выглядит следующим образом <myprefix-toggle></myprefix-toggle>.Это не работает.Однако, если я добавлю #, как если бы это был идентификатор, он скомпилируется.Почему и как я могу обойти это?

Работает

$prefix: "myprefix-";

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

Не работает

$prefix: "myprefix-";

{$prefix}toggle {
  background: red;
}

Я получаю ошибку, которая, вероятно, не связана с реальной проблемой ...

Ошибка: ожидается ':' после префикса $ в операторе присваивания

Если это важноиспользуйте gulp-sass для компиляции sass в css.

Answer 1

Хэштегом и фигурными скобками является синтаксис Sass для интерполяции #{ ... }

$prefix: "myprefix-";

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