Как создать переменную в css

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

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

CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. —main-color: black; ) и доступны через функцию var() (например. color: var(—main-color); ) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

Основное использование

element  --main-bg-color: brown; >

element  background-color: var(--main-bg-color); >

Примечание: В более ранней спецификации префикс для переменных был var- , но позже был изменён на — . Firefox 31 и выше следуют новой спецификации.(Firefox bug 985838)

Первый шаг с CSS Переменными

Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

.one  color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: brown; margin: 10px; width: 75px; > .four  color: white; background-color: brown; margin: 10px; width: 100px; > .five  background-color: brown; >

Мы применим его к этому HTML:

div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three" /> textarea class="four">Lorem Ipsumtextarea> div>

что приводит нас к этому:

Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.

:root  --main-bg-color: brown; > .one  color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; > .four  color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; > .five  background-color: var(--main-bg-color); >

div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three" /> textarea class="four">Lorem Ipsumtextarea> div>

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

Наследование переменных в CSS и возвращаемые значения

Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:

div class="one"> div class="two"> div class="three">div> div class="four">div> div> div>

со следующим CSS:

.two  --test: 10px; > .three  --test: 2em; >

В результате var(—test) будет:

для элемента с классом class=»two» : 10px
для элемента с классом class=»three» : 2em
для элемента с классом class=»four» : 10px (унаследовано от родителя)
для элемента с классом class=»one» : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:

.two  color: var(--my-var, red); /* red если --my-var не определена */ > .three  background-color: var( --my-var, var(--my-background, pink) ); /* pink если --my-var и --my-background не определены */ > .three  background-color: var( --my-var, --my-background, pink ); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */ >

Примечание: В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)

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

Обоснованность и полезность

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

К сожалению, эти значения могут использоваться через функциональную запись var() , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции валидности во время исполнения.

Совместимость с браузерами

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 27 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

CSS: Переменные

Современный сайт содержит тысячи строк стилей. Стили для блоков, текста, небольших областей — всё это часто лежит в одном месте. Представьте ситуацию: есть определённый оттенок красного цвета, который мы используем во множестве различных блоков.

Насколько удобно будет изменить все значения, если захочется изменить базовый цвет? Правильно — придётся находить все значения внутри файла и заменять их на новые.

Долгое время это было одной из главных проблем CSS. С появлением стандарта CSS3 эта проблема ушла благодаря переменным.

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

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

Переменная создаётся с помощью конструкции —имя-переменной . Имя переменной вы можете выбрать сами. Для примера создадим переменную —main-color , которая будет содержать базовый цвет страниц. Пускай он будет чёрным:

--main-color: #000000;

За такой простотой скрывается то, что переменные имеют разные «области видимости» — участки файла, откуда ими можно воспользоваться. Это большая тема, поэтому разберём только «глобальную область видимости». Это даст возможность использовать переменную в любом участке CSS файла.

Для создания глобальной переменной её нужно указать в специальной конструкции :root . Обычно это делается в самом начале CSS файла:

:root

Теперь можно использовать переменную в любой части нашего CSS-кода. Это делается с помощью специальной конструкции var(—имя-переменной) .

:root < --main-color: #000000; >.news-block < background-color: var(--main-color); >.left-sidebar

Если мы хотим установить другой оттенок чёрного цвета, достаточно изменить только значение переменной —main-color , и все изменения автоматически применятся к блокам с классами .news-block и .left-sidebar

Задание

Создайте переменную —main-blue и установите, в качестве значения, голубой цвет #00bfff . Переменную укажите в :root . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Изучите CSS-переменные за 5 минут

Пользовательские свойства CSS (CSS Custom Properties), также известные как переменные — большая победа для разработчиков интерфейсов. Они приносят силу переменных в CSS, что приводит к уменьшению дублирования, повышению читабельности и большей гибкости.

Кроме того, в отличие от переменных в препроцессорах CSS, нативные переменные CSS фактически являются частью DOM, что даёт много преимуществ. Поэтому они по существу похожи на переменные SASS и LESS на стероидах. В этой статье я проведу ускоренный курс о том, как работает эта новая технология.

Я также создал бесплатный интерактивный курс из 8 частей по CSS-переменным, поэтому ознакомьтесь с ним, если вы хотите стать экспертом по этой теме.

Зачем изучать переменные CSS?

Есть много причин использовать переменные в CSS. Одна из наиболее убедительных из них — уменьшение дублирования в вашей таблице стилей.

В приведённом выше примере гораздо лучше создать переменную для цвета #ffeead , чем дублировать значение, что мы и делаем:

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

Сейчас в течение многих лет подобное на самом деле уже возможно делать, используя SASS- и LESS-переменные. Тем не менее, есть несколько преимуществ в случае CSS-переменных:

Они не требуют никаких инструментов для работы, поскольку они поддерживаются самим браузером. Таким образом, вам не нужна дополнительная настройка, как начать с ними работу, в отличие от SASS и LESS.
Они находятся в DOM, что открывает массу возможностей, о которых я расскажу в этой статье и в своём предстоящем курсе.

Теперь давайте начнём изучение CSS-переменных!

Объявление первой переменной CSS

Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root , который соответствует корневому элементу в дереве документов (обычно это тег ).

Поскольку переменные наследуются, следующий ниже код делает вашу переменную доступной во всём вашем приложении, так как все ваши DOM-элементы являются потомками тега .

:root --main-color: #ff6f69;
>

Как вы можете видеть, вы объявляете переменную точно так же, как вы бы установили любое свойство CSS. Однако переменная должна начинаться с двух дефисов ( — ).

Для получения доступа к переменной, вам нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

#title color: var(--main-color);
>

И это назначит вашему заголовку цвет #ff6f69 :

Функция var поддерживает второй параметр, фолбэк, то есть значение (или также CSS-переменная), которое будет использоваться, если переменная, переданная первым параметром, не определена, например:

#title color: var(--main-color, black);
>

Если переменная main-color недоступна, то будет использоваться черный цвет ( black ).

Объявление локальной переменной

Вы также можете создавать переменные с локальной областью видимости, который будут доступны только для того элемента, в котором они были объявлены, включая его дочерние элементы. Это имеет смысл делать, если вы знаете, что переменная будет использоваться только в определённой части (или частях) вашего приложения.

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

.alert --alert-color: #ff6f69;
>

Теперь эта переменная может использоваться в дочерних элементах:

.alert p color: var(--alert-color); 
border: 1px solid var(--alert-color);
>

Если вы попытаетесь использовать переменную alert-color в другой части приложения, например, в навигационной панели, это не сработает: браузер просто проигнорирует такую строку CSS (за исключением, если не был предоставлен фолбэк вторым параметром).

Лёгкость реализации адаптивности с переменными

Большое преимущество CSS-переменных заключается в том, что они имеют доступ к DOM. Чего нельзя сказать о LESS или SASS, поскольку их переменные вставляются в обычный CSS.

На практике это означает, что вы можете, например, изменить переменные в зависимости от ширины экрана:

:root --main-font-size: 16px;
>

media all and (max-width: 600px) :root --main-font-size: 12px; 
>
>

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

Как получить доступ к переменным из JavaScript?

Доступ к CSS-переменным с помощью JavaScript — это ещё одно из преимуществ того, что CSS-переменные являются частью DOM. Вы можете обновлять их значения, что может пригодится, если вы хотите дать возможность вашим пользователям изменять внешний вид сайта (например, изменить размер шрифта).

Давайте продолжим на примере в начале этой статьи. Получение значение 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');

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

Поддержка браузеров

В данный момент 77 процентов от глобального трафика сайтов поддерживают переменные CSS, причём почти 90 процентов в США. Мы уже используем CSS-переменные на Scrimba.com некоторое время, поскольку наша аудитория технически подкована и в основном использует современные браузеры.

Хорошо, на этом всё. Надеюсь, вы узнали что-то новое для себя.

Если вы хотите изучить его правильно, обязательно посмотрите мой бесплатный курс по CSS-переменным.

Зачем нужны переменные в CSS

В проекте с колесом фортуны мы использовали переменные в CSS-файле, но толком не объяснили, как это всё работает. А вот как.

В чём идея

В каждом языке программирования есть переменные. В них программы хранят промежуточные данные. Но в CSS исторически переменных не было — это же был просто язык оформления документов.

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

�� Переменные и раньше можно было использовать при программировании CSS-файлов, например, используя препроцессоры SASS и LESS. Но потом всё равно нужно было скомпилировать SASS- или LESS-файл в чистый CSS, и там никаких переменных не было.

Преимущество родных CSS-переменных в том, что они даже на готовой странице остаются переменными.

Как использовать

Чтобы объявить переменную в CSS, достаточно придумать для неё имя, поставить перед ним два дефиса, а после имени — двоеточие и значение переменной:

Теперь эту переменную можно использовать вместо значений в свойствах стилей. Для этого пишем var(), а в скобках — название переменной. Когда браузер встретит такую конструкцию, он подставит вместо неё значение переменной.

body —font-s: 20px;
font-size: var(—font-s);
>

Значение по умолчанию

Иногда переменная, которую мы хотим подставить в какое-то место, может быть ещё не определена (например, скрипт ещё не сработал и не назначил ей никакого значения). В этом случае используют второй параметр для var():

Использовать эту конструкцию можно так:

Когда браузер встретит этот фрагмент, он попробует найти переменную —font-s и взять её значение. Если такой переменной не будет или она пустая, то браузер вместо неё будет использовать значение 14px.

Область видимости

Переменные видны в том блоке, в которых их объявляют.

Ещё переменные действуют во всех вложенных элементах внутри этого блока: если мы объявим переменную внутри блока body <> или html <>, то она будет действовать для всех элементов на странице, потому что они находятся внутри этих блоков.

�� Если нужна глобальная CSS-переменная, с которой нужно работать из любого места, её можно объявить внутри псевдокласса :root <>

Также переменные действуют внутри дочерних элементов: если мы объявим переменную для описания CSS-свойства класса, то и, например, абзацы с этим классом будут поддерживать эту переменную:

.alert —alert-color: #ff6f69;
>
.alert p color: var(—alert-color);
border: 1px solid var(—alert-color);
>

Зачем это нужно

Допустим, у нас есть фрагмент кода с определением оформления для двух тегов и одного класса:

p < font-size: 20px; color: #32590a; >a < font-size: 20px; color: #32590a; >.tags

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

:root < --font-s: 20px; --color-f: #32590a; >p < font-size: var(--font-s); color: var(--color-f); >a < font-size: var(--font-s); color: var(--color-f); >.tags

Какие браузеры поддерживают

Переменные в CSS поддерживают все современные браузеры, кроме Internet Explorer (но он не современный, вместо него Edge, который это поддерживает), поэтому эту технику можно использовать в любых новых проектах.

Апскиллинг, как говорится

Апскиллинг — это, например, переход с уровня junior на уровень middle, а потом — senior. У «Яндекс Практикума» есть курсы ровно для этого: от алгоритмов и типов данных до модных фреймворков.