Question

我尝试给一个自定义元素加上前缀<myprefix-toggle></myprefix-toggle>。这是行不通的。但是，如果我添加#就像它是一个id一样，它将进行编译。为什么以及如何解决呢？

工程

$prefix: "myprefix-";

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

不起作用

$prefix: "myprefix-";

{$prefix}toggle {
  background: red;
}

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

错误：赋值语句中$ prefix后出现预期的'：'

如果这很重要，我可以使用gulp-sass将sass编译为CSS。

Answer 1

＃标签和大括号是用于内插#{ ... }的Sass语法

$prefix: "myprefix-";

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

SASS前缀自定义元素

1 个答案: