Здравствуйте друзья, на связи Шевченко Вячеслав, и сегодня у меня не большой, но интересный пост. Вы когда нибудь сталкивались с проблемой разрастания проекта, и организацией css кода? Думаю ответ однозначно ДА, если НЕТ, то у вас все впереди.
Когда проект начинает расти, его CSS обычно становится громоздким, и тяжело поддерживаемым. Чтобы решить эту проблему, разработчики CSS ввели переменные, они уже поддерживаются популярными браузерами. Это дает возможность легко работать с повторениями стилей.
Знающие и бывалые верстальщики, могут возразить и сказать «Переменные уже давно в SASS и LESS!!». Да, я не спорю, но это препроцессоры и они нуждаются в компиляции перед использованием, а нативные переменные CSS работают прямо в браузере! Разве это не круто?
Видео урок
Объявление и использование CSS переменных
Переменные в файле используют ту же область видимости, что и другие правила в CSS. Конечно удобнее всего, когда они глобальные. Для этого нужно объявлять их внутри псевдо-класса :root.
:root{
--color-blue: #2437e2;
}
Чтобы получить доступ к переменной нужно использовать синтаксис var(...). Обратите внимание, что имена переменных чувствительны к регистру. К примеру --color-blue не будет равен --COLOR-BLUE.
.container{
background-color: var(--color-blue);
}
Немного о поддержке
Сейчас переменные работают в Firefox и Chrome последней версии. Актуальную информацию по поддержке можно получить
Ниже я приведу несколько примеров, которые хорошо продемонстрируют типичные случаи использования CSS-переменных. Если у вас не работают примеры, убедитесь что у вас браузер последних версий.
Цвета темы оформления
Переменные очень полезны когда вам нужно использовать свойства неоднократно. Здесь хорошим примером будет цветовая схема оформления. Вместо того чтобы копировать цвет от правила к правилу, мы можем просто поместить его в переменную и брать его оттуда.
И когда по каким-то причинам нужно будет изменить цвет темы, или создать новый скин, вы можете изменить цвет только в одном месте, но изменения повлияют на все страницы сайта.
Понятные имена для свойств
Вторым удобным способом использования переменных является создание неких пресетов, когда мы не хотим запоминать длинное значение свойства, например для transform, box-shadow и font.
Поместив значение свойства в переменную, мы можем вызвать его, используя понятные имена.
Динамическое изменение значений переменных
Когда каст свойство объявлена несколько раз , то тогда не учитывается низкое объявление в каскадном уровне стилей.
Пример ниже показывает как легко динамично манипулировать свойствами , при этом оставляя код чистым.
Еще несколько советов
Как вы видите, переменные в CSS — достаточно простой инструмент для использования и не требует много времени на его освоение. И еще пару вещей, которые вам нужно знать:
Функция var() принимает два аргумента, второй будет использоваться, если с переменной что-то не так:
width: var(--custom-width, 20%);
Также можно комбинировать переменные:
--base-color: #f93ce9; --background-gradient: linear-gradient(to top, var(--base-color), #444);
Так же можно переменные использовать с функцией calc(), ранее я писал о ней на сайте, обязательно прочтите статью если вы не знакомы с calc().
--container-width: 1000px; max-width: calc(var(--container-width) / 2);
Вот и все, теперь вы знаете как использовать переменные в CSS, только не увлекайтесь сильно переменными в рабочих проектах, так как поддержка очень слабая.
Если вам статья была интересна и полезна, поделитесь ей в социальных сетях. Так же подписывайтесь на наши группы в и . До встречи в новых статьях.
