Question

我没有SCSS的背景，但我想对现有的SCSS进行一些小改动并重新编译它。但是，我发现带有美元符号的变量出现在输出CSS中。即使我放弃了我的更改，输出CSS也与原始CSS不匹配。

例如，

@-webkit-keyframes $animation-name {...

在我的输出中，而

@-webkit-keyframes move-up {...

是预期的原始输出。

我认为这是因为我没有使用正确的命令来编译SCSS文件，或者因为SCSS文件是为较旧的编译器编写的。

我尝试了以下命令（我在每次试用前清除任何输出）：

sass --scss main.scss main.css
sass --scss --update main.scss:main.css
sass --scss --update .

因为main.scss导入了另一个SCSS文件，所以我也尝试将依赖SCSS文件的内容复制到main.scss中。这并没有任何区别。

Answer 1

打印变量名称而不是它们的值是因为它们不是插值所以sass会将它们用作值。

你应该写

//Assuming a variable $animation-name: move-up;
@-webkit-keyframes #{$animation-name} { ....

汇编到

@-webkit-keyframes move-up { ....

没有插值sass认为$animation-name是实际名称，旨在用作动画的名称。