Автор оригинала: Per Harald Borgen.
CSS Пользовательские свойства (также известные как переменные) – большая победа для интерфейсных разработчиков. Он приносит мощность переменных к CSS, что приводит к меньшему повторению, лучшую читабельность и более гибкость.
Кроме того, в отличие от переменных от CSS Preprocessors, переменные CSS на самом деле являются частью DOM, которая имеет много преимуществ. Таким образом, они по сути, как Sass и менее переменные на стероидах. В этой статье я дам вам выездной курс по тому, как работает эта новая технология.
Я также создал Бесплатный и интерактивный курс 8 частей на переменных CSS Так что проверьте это, если вы хотите стать экспертом на эту тему.
Хотите изучать переменные CSS? Вот мой бесплатный 8-частный курс!
Почему выучить переменные CSS?
Есть много причин использовать переменные в CSS. Один из самых убедительных состоит в том, что он уменьшает повторение в вашем стиле.
В приведенном выше примере намного лучше создать переменную для #ffead Цвет, чем повторять это, как мы здесь делаем:
Это не только облегчает чтение вашего кода, но он также дает вам больше гибкости, если вы хотите изменить этот цвет.
Теперь это действительно было возможно с SAS и менее переменными в течение многих лет. Однако есть несколько больших преимуществ с переменными CSS.
- Они не требуют какого-либо транспортировки на работу, так как они родные для браузера. Таким образом, вам не нужна установка, чтобы начать, как вы делаете с Sass и меньше.
- Они живут в доме, которая открывает тонну преимуществ, которые я пройду в этой статье и в моем предстоящем курсе.
Теперь давайте начнем изучать CSS-переменные!
Объявление вашей первой переменной CSS
Чтобы объявить переменную, вам сначала нужно решить, в какую область переменной должен жить переменной. Если вы хотите, чтобы это было доступно во всем мире, просто определите его на : root псевдо класс. Он соответствует корневому элементу в вашим дереве документа (обычно тег).
В качестве переменных унаследована, это сделает вашу переменную доступную на протяжении всего вашего приложения, так как все ваши элементы DOM являются потомками ярлык.
:root {
--main-color: #ff6f69;
}
Как видите, вы объявляете переменную так же, как вы установили любое свойство CSS. Однако переменная должна начинаться с двух тире.
Чтобы получить доступ к переменной, вам нужно использовать var () Функция и пропустите имя переменной в качестве параметра.
#title {
color: var(--main-color);
}
И это даст вашему титул # F6F69 цвет:
Объявление локальной переменной
Вы также можете создавать локальные переменные, которые доступны только к элементу, который он объявлен в и его детям. Это имеет смысл делать, если вы знаете, что переменная будет использоваться только в определенной части (или части) вашего приложения.
Например, у вас может быть предупреждающая коробка, которая использует особый цвет, который не используется в других местах в приложении. В этом случае это может иметь смысл избегать помещения его в глобальную область:
.alert {
--alert-color: #ff6f69;
}
Эта переменная теперь может использоваться своими детьми:
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}
Если вы пробовали использовать Оповещение Переменная где-то еще в вашем приложении, например, в Навкаре, она просто не будет работать. Браузер просто проигнорирует эту строку CSS.
Легче отзывчивость с переменными
Большим преимуществом переменных CSS является то, что у них есть доступ к DOM. Это не так с меньшей или SAS, так как их переменные скомпилированы до обычных CSS.
На практике это означает, что вы можете, например, изменить переменные на основе ширины экрана:
:root {
--main-font-size: 16px;
}
media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}
И с этими простыми четыреми линиями кода вы обновили основной размер шрифта по всему вашему приложению при просмотре на небольших экранах. Довольно элегантный, а?
Как получить доступ к переменным с JavaScript
Еще одним преимуществом жизни в DOM является то, что вы можете получить доступ к переменным с JavaScript и даже обновить их, например, на основе пользовательских взаимодействий. Это идеально, если вы хотите дать пользователям возможность изменить свой веб-сайт (например, настроить размер шрифта).
Давайте продолжим на примере с начала этой статьи. Схватывание переменной CSS в JavaScript принимает три строки кода.
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);
\--> '#ffeead'
Чтобы обновить переменную CSS просто позвоните SetProperty Способ на элементе, в котором переменные были объявлены включенным и проходить в имени переменной в качестве первого параметра и новое значение в качестве второго.
root.style.setProperty('--main-color', '#88d8b0')
Этот главный цвет может изменить весь вид вашего приложения, поэтому он идеально подходит для разрешения пользователей, чтобы пользователи устанавливать тему вашего сайта.
Обновление одной переменной вы можете изменить цвет NAVBAR, текста и элементы.
Поддержка браузера
В настоящее время 77 процентов мирового трафика сайта поддерживают переменные CSS, с почти 90 процентов в США. Мы уже используем переменные CSS в Scrimba.com Некоторое время, поскольку наша аудитория довольно технология Savvy, и в основном использует современные браузеры.
Хорошо, это было. Я надеюсь, что вы узнали что-то!
Если вы хотите правильно изучить его, обязательно проверьте Мои бесплатные переменные CSS курс на Scrimba.
Спасибо за прочтение! Меня зовут на Borgen, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.
Оригинал: “https://www.freecodecamp.org/news/learn-css-variables-in-5-minutes-80cf63b4025d/”