Все, что вам нужно знать об использовании переменных в CSS

Все, что вам нужно знать об использовании переменных в CSS

От автора: большинство языков программирования поддерживают переменные. Но, к сожалению, CSS не нуждался в поддержке родных переменных с самого начала. Вы пишете CSS? Тогда для вас нет переменных. Ну, кроме тех случаев, когда вы использовали такой препроцессор, как Sass. Такие препроцессоры подают использование переменных в качестве большого дополнения. И знаете что? Это довольно веская причина их использовать. Веб быстро развивается. И я рад сообщить, что теперь использование переменных в CSS стало реальным. Хотя препроцессоры поддерживают намного больше функций, всё же добавление переменных CSS это отлично. Это двигает сеть ещё ближе к будущему. В этом руководстве я покажу вам, как изначально работают переменные в CSS, и как можно использовать их, чтобы сделать жизнь намного проще.

Чему вы научитесь

Сначала я расскажу вам об основах CSS-переменных. Я считаю, что любая попытка понять переменные CSS должна начинаться отсюда.

Изучить основы — это круто. Но еще круче — применять эти основы для создания реальных приложений.

Поэтому я расскажу вам, как создать 3 проекта, которые демонстрируют переменные CSS и их простоту использования. Вот превью этих трех проектов.

Проект 1: Создание вариаций компонентов с использованием переменных CSS

Сегодня уже есть возможность создавать вариации компонентов. Если вы используете React, Angular или Vue, переменные CSS сделают этот процесс проще.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Проверьте проект на Codepen.

Проект 2: Стили темы с переменными CSS

Вероятно, вы сталкивались уже с этим. Я покажу, как легко переменные CSS создают темы стилей на веб-узле.

Проверьте проект на Codepen.

Проект 3: построение таблицы переменной CSS

Это последний проект. Не обращайте внимание на его названия, я не смог придумать ничего лучше.

Обратите внимание, что цвета ящиков динамически обновляются и изменяются как вращающаяся в трехмерном пространстве коробка при изменении диапазона ввода.

Этот проект демонстрирует простоту обновления CSS-переменных с помощью JavaScript и реактивные лакомства, которые вы получаете с ним.

Будет весело!

Проведите некоторое время с удовольствием на Codepen.

Примечание. В статье предполагается, что вы хорошо разбираетесь в CSS.

Почему переменные настолько важны

Если вы новичок в переменных препроцессоров или родном CSS, вот несколько причин, по которым переменные важны.

Причина №1: Более читаемый код

Я не стану говорить о том, что вы сами можете быстро рассказать, как читаемые и поддерживаемые переменные делают любую базу кода.

Причина № 2: Простота изменений в крупных документах</p>

Если у вас есть все ваши константы, сохраненные в отдельном файле, вам не нужно перепрыгивать через тысячи строк кода, когда вы хотите внести изменения в переменную.

Всё становится проще некуда. Просто измените в одном месте, и вуаля.

Причина № 3: быстрое обнаружение опечаток

Жизнь-боль, когда ищешь строки кода, пытаясь обнаружить ошибку. Ёще более раздражает, если ошибка связана с простой опечаткой. Их трудно обнаружить. Правильное использование переменных устраняет эти неприятности.

Читабельность и ремонтопригодность здесь — большой выигрыш.

Благодаря переменным CSS, теперь у нас есть свой собственный CSS.

Определение переменных CSS

Позвольте мне начать с того, что вы уже знаете: переменные в JavaScript.

Простая переменная JavaScript может быть объявлена следующим образом:

Теперь вы можете присвоить ей некоторое значение:

В CSS переменная CSS — это любое «свойство», имя которого начинается с двух тире.

Определение области видимости переменных CSS

Есть ещё кое-что, на что нужно обратить внимание. Помните, что в JavaScript переменные имеют область видимости. Они могут иметь global или local охват. То же самое можно сказать и о переменных CSS. Рассмотрим пример:

Селектор :root позволяет настроить таргетинг на элемент самого высокого уровня в DOM или на дерево документов. Переменные, объявленные таким образом, относятся к глобальной области видимости. Понятно?

Пример 1

Предполагая, что вы хотели создать переменную CSS, которая сохранила основной цвет темы сайта. Как бы вы это сделали?

1. Вы создаете селектор диапазона. Используйте :root для переменной «global»

2. Определите переменную

Помните, что переменная CSS — это любое свойство, имя которого начинается с двух тире, например —color. Это было просто.

Использование переменных CSS

Как только переменная определена и ей присвоено значение, можно использовать её в пределах значения свойства. Есть ещё кое-что. Если вы пришли из мира препроцессоров, вы можете использовать эту переменную, просто ссылаясь на ее имя. Например:

С родными переменными CSS, все немного иначе. Вы ссылаетесь на переменную с помощью функции var(). В приведенном выше примере использование переменных CSS приведет к следующему:

Довольно отличается.

Как только вы это осознаете, вы начнете любить переменные CSS! Еще одно важное замечание состоит в том, что, в отличие от переменных в Sass (или других препроцессорах) — где вы можете использовать переменные во многих местах и выполнять вычисления, как вы хотите, вам нужно быть осторожным с переменными CSS. В основном устанавливать их нужно как значения свойств.

Вы также не можете заниматься вычислениями. Для этого вам нужна функция CSS calc() . Я расскажу о примерах, когда мы продолжим.

Если выполнить вычисления, используйте функцию calc () следующим образом:

Свойства достойные упоминания

Вот некоторые примеры, которые стоит упомянуть.

1. Пользовательские свойства — это обычные свойства, поэтому они могут быть объявлены на любом элементе.

Объявите их в элементе абзаца, разделе, в корне или даже псевдоэлементах. Они будут работать, как надо.

2. Переменные CSS разрешаются с помощью нормального наследования и каскадных правил

Рассмотрим блок кода:

Как и для обычных переменных, значение —color будет наследоваться div.

3. Переменные CSS могут быть сделаны условными с @media и другими условными правилами

Как и в других свойствах, вы можете изменить значение переменной CSS в блоке @media или других условных правилах. Например, следующий код изменяет значение переменной, разделяет на больших устройствах.

4. Переменные CSS могут использоваться в атрибуте стиля HTML.

Вы можете установить значение встроенных переменных в переменную, и они все равно будут работать, как следует.

Переменные CSS зависят от регистра. Будьте осторожны с этим. Я облегчил себе задачу и записываю переменные в нижнем регистре. Ваш способ может отличаться.

Разрешение нескольких объявлений

Как и в других свойствах, множественные объявления разрешаются стандартным каскадом. Рассмотрим пример:

С объявленными выше переменными, какими будут цвета следующих элементов?

Понимаете? Первый абзац будет blue. На селекторе p нет прямого определения —color, поэтому он наследует значение от :root

Первый div будет green. Это ясно. На div набор прямых переменных

div с идентификатором alert не будет зеленым. Он будет red

Идентификатор имеет прямую переменную. Таким образом, значение с определением переопределяет все остальные. Селектор #alert более конкретный.

Наконец, p внутри #alert будет … red

В элементе абзаца нет объявления переменных. И вы, возможно, ожидали, что цвет будет blue из-за объявления в :root элементе.

Как и в других свойствах, переменные CSS наследуются. Значение наследуется от родителя, #alert

Разрешение циклических зависимостей

Циклическая зависимость происходит следующими способами:

Когда переменная зависит от самой себя. То есть, она использует var(), который ссылается на себя же.

Когда две или более переменные ссылаются друг на друга.

Будьте внимательны, чтобы не создавать циклические зависимости внутри вашего кода.

Что происходит с неверными переменными?

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

Рассмотрим следующее:

Как и ожидалось, —color заменяется на var() но значение свойства background-color: 20px недействительно после замены. Поскольку backgroud-color не является наследуемым свойством, значение по умолчанию будет равным его initial значению transparent.

Обратите внимание, что? если бы вы написали backgroud-color: 20px без каких-либо переменных-заменителей, конкретная backgroud-color: 20px была бы недействительной. В этом случае будет использовано предыдущее объявление.

Будьте осторожны при создании одиночных токенов

Когда вы устанавливаете значение свойства, как указано ниже, 20px интерпретируется как одиночный токен.

Простым способом здесь является то, что значение 20px рассматривается как единый «объект». Вы должны быть осторожны при создании одиночных токенов с переменными CSS. Рассмотрим следующий блок кода для примера:

Возможно, вы ожидали, что значение font-size даст 20px, но это не так. Браузер интерпретирует это как 20 px. Обратите внимание на пробел после 20

Таким образом, если вы должны создать одиночные токены, переменная будет представлять весь токен. Например, —size: 20px, или используйте функцию calc например calc(var(—size) * 1px) где — —size равен 20

Не беспокойтесь, если вы чего-то не поняли. Я объясню это более подробно в следующем примере. Давайте делать вещи! Это та часть статьи, которую вы ждали! Я проведу вас через практическое применение концепций, путем создания нескольких полезных проектов.

Приступим:

Проект 1: Создание вариаций компонентов с использованием переменных CSS

Рассмотрим случай, когда вам нужно создать две разные кнопки. Те же базовые стили, просто разные.

В этом случае отличительными свойствами вариантов являются background-color иborder-color. Итак, как бы вы это сделали? Вот типичное решение. Создайте базовый класс, скажем .btn и добавьте варианты классов.Вот пример разметки:

.btn будет содержать базовые стили на кнопке. Например:

Итак, где мы поместим наш вариант? Здесь:

Видите, как мы дублируем код здесь и там? Это, конечно, здорово, но мы могли бы улучшить его с помощью переменных CSS. Каков наш первый шаг? Заменить разные цвета на переменные CSS и добавить для них значения по умолчанию!

Когда вы сделаете: background: var(—color, black), установите фон в значение переменной —color . Однако, если переменной не существует, используйте значение по умолчанию black

И как же устанавливать значения переменных по умолчанию? Так же, как в JavaScript или любом другом языке программирования. Вот полезная часть. С вариантами вы просто указываете новое значение переменной CSS как:

Это все. Теперь, когда использован .red класс, браузер отмечает различное значение переменной .red и сразу же обновляет внешний вид кнопки. Это действительно полезно, если вы тратите кучу времени на создание многоразовых компонентов. Сравните сами:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

И если у вас было больше вариантов, вы просто избавили себя от лишнего набора текста.

Проект 2: Сайты с темами с переменными CSS

Я уверен, что вы сталкивались с ними раньше. Тематические сайты дают пользователю ощущение управления. Как будто они находятся под контролем. Ниже приведен основной пример, который мы рассмотрим.

Итак, насколько переменные CSS сделают это легче? Посмотрим. Перед этим я хотел бы упомянуть, что этот пример очень важен. В нём я представлю концепцию обновления переменных CSS с помощью JavaScript.

Это весело! Вам понравится. Что мы действительно хотим сделать.

Красота переменных CSS — их реактивный характер. Как только они обновляются, любое свойство, имеющее значение переменной CSS, также обновляется. Вот изображение, которое объясняет процесс в отношении данного примера.

Итак, нам нужен JavaScript для прослушивателя кликов. В этом простом примере фон и цвет текста всей страницы основаны на переменных CSS.

Когда вы нажимаете любую из кнопок выше, они устанавливают переменную CSS для другого цвета. В результате этого обновляется фон страницы.

Вот и всё. И ещё кое-что. Когда я говорю, что переменная CSS установлена на какое-то другое значение, как это сделано?

Переменные CSS будут вступать в силу, даже если они установлены в строке. С JavaScript мы получаем корневой документ, и мы устанавливаем внутрь новое значение для переменной CSS.

Понимаете? Слишком много разговоров — перейдём к делу.

Начальная разметка

Необходима начальная разметка.

Разметка состоит из трех кнопок в родительском элементе .theme .Чтобы всё было в порядке, я усекал содержимое внутри элемента article. Внутри article элемента — содержимое страницы.

Создание стиля страницы

Успех проекта начинается с оформления страницы. Трюк прост. Вместо того, чтобы просто устанавливать background-color и color страницы, мы будем устанавливать их на основе переменных. Вот что я имею в виду.

Причина этого очевидна. Всякий раз, когда нажимается кнопка, внутри документа меняется значение обеих переменных. После этих изменений будет обновлен общий стиль страницы. Очень просто.

Итак, давайте перейдем к обновлению с JavaScript.

Вход в JavaScript

Я пойду вперед и выверну весь JavaScript, необходимый для этого проекта.

Не пугайтесь. Это намного проще, чем вы думаете. Прежде всего, держите ссылку на корневой элемент, const root = document.documentElement

Корневым элементом здесь является элемент HTML. Вы поймете, почему это важно. Если вам интересно, необходимо установить новые значения переменных CSS.

Кроме того, ссылку на кнопки тоже сохраняйте, const themeBtns = document.querySelectorAll(‘.theme > button’)

querySelectorAll дает querySelectorAll структуру данных, которую мы можем перебрать. Перейдите по каждой из кнопок и добавьте к ним прослушиватель событий.

Где функция handleThemeUpdate? Я расскажу это дальше.

Каждая handleThemeUpdate кнопка будет иметь handleThemeUpdate в качестве функции обратного вызова. Важно отметить, какая кнопка была нажата, а затем выполнить правильную операцию.

В свете этого используется переключатель operator, и некоторые операции выполняются на основе значения нажатой кнопки. Перейдем к рассмотрению блока кода JavaScript. Теперь вы лучше сможете это понять.

Проект 3: построение каскадной таблицы CSS

Если вы это пропустили, вот что мы будем строить:

Помните, что цвет ящиков динамически обновляется и что контейнер поворачивается в трехмерном пространстве при изменении ввода диапазона.

Вы можете опробовать это на Codepen.

Это превосходный пример реактивности обновления переменных CSS с JavaScript, которая приходит с ними. Давайте посмотрим, как это делается.

Разметка

Вот необходимые компоненты.

Входной сигнал диапазона

Контейнер для хранения инструкций

Раздел для хранения списка других полей, каждый из которых содержит поля ввода

Разметка получается простой. Вот:

Вот несколько вещей, на которые нужно обратить внимание.

Входной сигнал диапазона представляет значения от -50 до 50 с шагом 5. Кроме того, значение входного сигнала диапазона является минимальным значением -50

Если вы не знаете, как работает вход диапазона, проверьте его на w3schools

Обратите внимание, что раздел с классами .color-boxes содержит другие контейнеры .color-box . Внутри этих контейнеров есть поля ввода.

Возможно, стоит упомянуть, что первый вход имеет значение по умолчанию red.

Поняв структуру документа, продолжайте и создайте его так:

Возьмите контейнеры .slider и .instructions из потока документов. Точно расположите их.

Дайте элементу body цвет фона восхода и украсьте фон цветком в нижнем левом углу

Поместите контейнер color-boxes в центр

Стилизуйте контейнер color-boxes

Давай их уроним. Ниже будет исправлено первое задание.

Фрагмент кода не такой сложный, как вы думаете. Надеюсь, вы сможете прочитать и понять. Если нет, оставьте комментарий или твит. Стилизация body немного сложней. Надеюсь, вы хорошо разбираетесь в CSS.

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

Бит url — это ссылка на подсолнух. Следующий набор свойств 0 100% представляет фоновое положение изображения. Вот иллюстрация того, как работает фоновая позиционирование CSS:

Другой бит после прямой косой черты представляет собой background-size Это значение было задано на 340px Если вы уменьшили размер, изображение будет меньше. no-repeat предотвращает повторение фона.

Наконец, все, что приходит после запятой, является вторым фоновым объявлением. На этот раз мы установили только background-color вvar(primary-color)

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

Основной цвет — желтый цвет восхода солнца. Ничего страшного. В ближайшее время мы добавим еще несколько переменных. Теперь давайте сосредоточимся на color-boxes

Основной контейнер действует как гибкий контейнер и правильно позиционирует дочерний директ в центре страницы. Это наш любимый контейнер с color-box

Давайте сделаем контейнер цветных ящиков и его дочерние элементы красивыми. Во-первых, дочерние элементы:

Это сделает нам вот что: будет добавлена красивая тень и появятся некоторые интересные эффекты. Это еще не все. Давайте создадим контейнер container-boxes:

О, боже! Там много всего. Давайте закончим с этим. Вот простой бит:

Вы знаете, что это даёт, да? Там есть новая переменная. Это нужно сделать, добавив его в корневой селектор.

Вторичный цвет красный. Это придаст контейнеру красный фон. Вернёмся к той части, которая, вероятно, смутила вас:

На мгновение мы могли бы упростить значение свойства преобразования выше.

Например:

Сокращение преобразования применяется к двум различным функциям. Одна, перспектива и другая — вращение вдоль оси Y.

Хм, так что же с perspective и функциями rotateY?

Функция perspective() применяется к элементу, который преобразуется в трехмерном пространстве. Он активирует трехмерное пространство и дает глубину элемента вдоль оси z.

Больше о функции перспективы можно узнать на codrops. Функция rotateY , с чем она связана? При активации 3d-пространства элемент имеет плоскости x, y, z. Функция rotateY вращает элемент вдоль плоскости Y. Диаграмма из codrops действительно полезна для визуализации примера.

Надеюсь, это позволило вам немного расслабиться. Вернёмся к тому, с чего мы начали.

Знаете ли вы, какая функция влияет на поворот .container-box, когда вы перемещаете ползунок? Вызывается функция rotateY. Коробка поворачивается вдоль оси Y. Поскольку значение, переданное в функцию rotateY, будет обновляться через JavaScript, значение представлено переменной.

Итак, зачем умножать переменную на 1deg? Как правило, и для облегчения задачи рекомендуется, чтобы при создании отдельных токенов вы сохраняли значения своих переменных без единиц. Вы можете конвертировать их в любое подразделение, которое хотите, выполнив умножение с помощью функции calc.

Это позволяет вам делать «что угодно» с этими значениями, когда они у вас есть. Хотите преобразовать в deg или отнести к пользовательскому видовому vw, ваше право. В этом случае мы преобразуем число, чтобы иметь степень, умножая значение «числа» на 1deg

Поскольку CSS не понимает математику, вам необходимо передать эту вычисления в функцию calc, где они будут правильно оценены CSS.

Как только это будет сделано, всё встанет на свои места. Значение этой переменной может быть обновлено в JavaScript столько раз, сколько нам захочется. Теперь осталось только один бит CSS.

Итак, что это за вуду? Во-первых, селектор nth-child выбирает каждый из дочерних блоков.

Здесь нужно немного предусмотрительности. Мы знаем, что мы будем обновлять цвет фона каждого окна. Мы также знаем, что этот цвет фона должен быть представлен переменной, поэтому он доступен через JavaScript. Правильно?

Мы могли бы продолжить и сделать так:

Легко. Однако есть одна проблема. Что происходит, если эта переменная отсутствует? Нам нужен резерв.

Конкретно в этом случае я выбрал НЕ предоставлять какие-либо резервные копии.

Если переменная, используемая в пределах значения свойства, недействительна, свойство примет начальное значение.

Следовательно, когда —bg-1 недействителен или НЕ доступен, фон по умолчанию будет иметь начальное значение transparent.

Начальные значения относятся к значениям свойства, если они не заданы. Например, если вы не задаете background-color элемента, он будет по умолчанию transparent

Начальные значения являются значениями значений свойств по умолчанию.

Будем писать JavaScript

Нам совсем немного нужно сделать со стороны JavaScript. Сначала давайте обработаем ползунок. Для этого нужно всего 5 строк!

Это было легко, да? Во-первых, держите ссылку на элемент слайдера, const range = document.querySelector(‘.booth-slider’)

Настройте прослушиватель событий, когда изменяется значение диапазона входа, range.addEventListener(‘input’, handleSlider)

Напишите обратный вызов, handleSlider

root.style.setProperty(‘—slider’, value) получает root элемент (HTML), захватывает его стиль и устанавливает на нем свойство.

Обработка изменений цвета

Это так же просто, как обработка изменения ползунка. Вот как:

Содержите ссылку на все текстовые входы, const inputs = document.querySelectorAll(‘.color-box > input’)

Настройте прослушиватель событий на всех входах:

Напишите функцию handleInputChange:

Уф … Это оно! Проект выполнен.

Как я сделал это?

Я выполнил и отредактировал первоначальный проект этой статьи, когда заметил, что нигде не упоминаю поддержку браузера. Итак, позвольте мне исправить свой беспорядок.

Поддержка браузера для переменных CSS (ака пользовательских свойств) неплохая. Это довольно хорошо, с приличной поддержкой во всех современных браузерах (более 87% на момент написания этой статьи).

Итак, можете ли вы использовать переменные CSS в производстве сегодня? Я скажу «да»!

С другой стороны, вы можете использовать препроцессор, такой как Myth. Он будет препроцитировать ваш «будущий» CSS во что-то, что вы используете сегодня. Здорово, правда?

Примечание: я не проверял, как делают смайлики в полимере , но я вижу много переменных CSS, используемых с многоразовыми полимерными компонентами. Вот и все.

Автор: Ohans Emmanuel

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree