Некоторые отличия синтаксиса переменных в SCSS от обычного CSS:

• Обозначение переменных. 3 В CSS переменные начинаются с двух тире (--color: #9c27b0). 3 В SCSS переменная обозначается знаком доллара ($color: #9c27b0). 3
• Область видимости. 12 Переменные CSS имеют область видимости по элементам: они доступны в том элементе, где были объявлены, или в любом из его дочерних элементов. 2 Переменные SCSS доступны внутри блока, в котором они были объявлены. 2
• Тип переменных. 1 Переменные CSS декларативны: если изменить значение, это повлияет как на предыдущее, так и на последующее использование. 1 Переменные SCSS императивные: если использовать переменную, а затем изменить её значение, предыдущее использование останется прежним. 1
• Компиляция. 2 Переменные SCSS компилируются в файл CSS, в то время как переменные CSS поддерживаются современными браузерами и не требуют компиляции. 2
• Значения по умолчанию. 2 Для переменных CSS можно предоставить значения по умолчанию, которые будут использоваться, если переменная не определена. 2 Для переменных SCSS есть возможность задать значение по умолчанию с помощью флага !default. 1
• Помощь IDE. 2 Отсутствие переменной в SCSS вызовет ошибку, в то время как в CSS нет подсказки о возможных проблемах. 2