Тест по CSS — Переменные и кастомные свойства
Как правильно объявить кастомное свойство CSS?
- let --main-color = red;
- --main-color: red;
- var main-color = red;
- $main-color: red;
Как правильно использовать кастомную переменную в свойстве?
- --main-color;
- var(--main-color);
- get(--main-color);
- $main-color;
Какой селектор используют чаще всего для глобального объявления переменных?
- root
- :root
- *
- body
Какая функция используется для доступа к значениям CSS-переменных?
- use()
- apply()
- var()
- get()
Как задать значение по умолчанию для CSS-переменной?
- color: default(--text-color, black);
- color: var(--text-color, black);
- color: fallback(--text-color, black);
- color: --text-color || black;
Что из следующего верно о поведении CSS-переменных?
- Нельзя переопределять в классах
- Не наследуются
- Можно изменять в медиазапросах
- Работают только в JS
Чем отличаются SCSS и CSS переменные?
- SCSS быстрее
- CSS-переменные используют $
- SCSS-переменные компилируются, CSS-переменные работают в рантайме
- CSS-переменные доступны только в :root
Какое поведение наследования реализовано у CSS-переменных?
- default
- inherit
- scoped
- cascading
Какой метод JS используется для изменения CSS-переменной?
- assign()
- define()
- setVar()
- setProperty()
::ProseTestQuestion{:answers='"document.documentElement.style.setProperty('--color', 'blue')", "style.color = 'var(--color)'", "style.set('--color', 'blue')", "document.setVar('--color', 'blue')"'
Как называется сама переменная без использования функции?
- --main-color
- $main-color
- value(--main-color)
- var(--main-color)
Что из этого утверждения верно?
- var() работает только внутри @media
- Кастомные свойства можно анимировать
- CSS-переменные не работают в flex
- Переменные работают только с цветами
Где можно переопределить значение переменной?
- Только в классе .global
- Только в body
- Только в :root
- Любом селекторе
Какую функцию часто используют вместе с var() для вычислений?
- value()
- get()
- calc()
- var()
Какое главное преимущество использования CSS-переменных?
- Управление стилями через JS
- Переиспользование значений
- Все вышеперечисленное
- Динамическое переопределение тем