Выбор ответа Junior Архитектура CSS спрашивают часто обновлено
Переменные Sass и кастомные свойства
Вопрос
Чем кастомное свойство --accent принципиально отличается от переменной Sass $accent?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: --accent живёт в браузере и наследуется, а $accent исчезает при сборке. Sass заменяет $accent на значение при компиляции, в браузер приходит уже готовый цвет.
Варианты ответа
- Ничем: это разный синтаксис одного механизма, и оба доходят до браузера в CSS
- Кастомные свойства работают только внутри
:root, а$accentв любом селекторе - Переменные Sass можно менять из JavaScript в рантайме, а кастомные свойства нельзя
--accentживёт в браузере и наследуется, а$accentисчезает при сборкеправильный ответ
Разбор
Sass заменяет $accent на значение при компиляции, в браузер приходит уже готовый цвет. Кастомное свойство остаётся в CSS, наследуется и пересчитывается на лету, на этом строятся темы. Объявлять его можно на любом селекторе, :root лишь удобное место для глобальных значений. Из JS меняются именно кастомные свойства (style.setProperty), а Sass в рантайме не существует.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.