SCSS частично скомпилирован, переменные остались в CSS?

Question

У меня нет фона в SCSS, но я хочу внести небольшое изменение в существующий SCSS и перекомпилировать его. Тем не менее, я обнаружил, что переменные со знаком доллара появляются в выходном 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 мере зависит основные. СКС. Это не имело никакого значения.

Answer 1

Имена переменных аргументов печатаются вместо их значений, потому что они не были интерполированным, поэтому sass использует их вместо значений.

Вы должны написать

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

Который компилируется в

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

без интерполяции дерзости считает, что $animation-name является фактическим именемпредназначен для использования в качестве имени для анимации.