user31039 user31039 - 1 month ago 8
Sass (Sass) Question

SCSS 'partially compiled', variables left in CSS?

I have no background in SCSS, but I want to make a small change to an existing SCSS and recompile it. However, I found that variables with a dollar sign appear in the output CSS. Even if I discard my changes, the output CSS does not match the original.

For example,

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


is in my output, while

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


is the expected original output.

I think it is either because I didn't use the right command to compile the SCSS files, or because the SCSS files were written for an older compiler.

I have tried the following commands (I clear any output before each trial):

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


Because main.scss imports another SCSS file, I also tried copying the content of the depedent SCSS file into main.scss. This didn't make any difference.

Answer

The reason variable names are printed instead of their values is because they were not interpolated so sass uses them as the values instead.

You should write

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

Which gets compiled to

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

Without the interpolation sass believes that the $animation-name is the actual name intended to be used as the name for the animation.