В чем разница между SASS переменными и нативными CSS переменными

Что проверяют

Понимаете ли вы, что это переменные разных миров: одни живут только при компиляции, другие в браузере во время работы страницы. Следом обычно спрашивают, как вы строите темизацию и можно ли совместить оба подхода.

Как отвечать

Начните с главного различия: переменная Sass ($primary: #1677ff;) подставляется компилятором, и в итоговом CSS её уже нет, остаётся просто значение. Кастомное свойство (--primary: #1677ff;) доезжает до браузера и читается через var(--primary, запасное) в момент вычисления стилей.

Из этого вытекает остальное:

• область видимости: у Sass она лексическая, по блокам и модулям. С @use переменные другого файла доступны через пространство имён (colors.$primary), а имя с - или _ в начале остаётся приватным. Кастомные свойства подчиняются каскаду и наследованию: объявили на :root, видно везде, объявили на .card, видно только внутри неё;
• динамика: кастомное свойство меняется в медиазапросе, на :hover, в [data-theme="dark"] или из JS через el.style.setProperty('--primary', value). Переменную Sass в рантайме поменять нельзя;
• где работают: Sass подставляется куда угодно, в том числе в условия @media, в селекторы через интерполяцию и в функции модуля sass:color. var() в условии медиазапроса не работает, а color.adjust(var(--primary), ...) не скомпилируется, потому что значения при сборке ещё нет. В CSS для этого есть color-mix() и calc();
• типизация: через @property кастомному свойству задают тип и начальное значение, после чего его можно анимировать.

Практичная схема: Sass для того, что известно при сборке (брейкпоинты, миксины), кастомные свойства для того, что меняется в рантайме (тема, отступы компонента).

Где спотыкаются

Называют кастомные свойства «глобальными». Они привязаны к элементу и его потомкам, и переопределение на вложенном блоке это нормальный приём, а не ошибка.

Пытаются затемнить var() через darken() и удивляются ошибке компиляции.

Не знают, что некорректное значение в var() не откатывает браузер к предыдущему объявлению: свойство становится невалидным при вычислении и получает унаследованное или начальное значение.