SASS 前缀自定义元素

Question

我尝试为看起来像这样的自定义元素添加前缀 <myprefix-toggle></myprefix-toggle>。这没用。但是，如果我添加 # 就好像它是一个 id 一样，它会编译。为什么以及如何绕过它？

作品

$prefix: "myprefix-";

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

不起作用

$prefix: "myprefix-";

{$prefix}toggle {
  background: red;
}

我得到的错误可能与实际问题无关...

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

如果它很重要，我使用 gulp-sass 将 sass 编译为 css。

Answer 1

主题标签和大括号是Sass 插值语法 #{ ... }

$prefix: "myprefix-";

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

SASS 前缀自定义元素

SASS prefix custom element

sass

prefix