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

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

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

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

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

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

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

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

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

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

1. Они не требуют никаких инструментов для работы, поскольку они поддерживаются самим браузером. Таким образом, вам не нужна дополнительная настройка, как начать с ними работу, в отличие от SASS и LESS.
2. Они находятся в 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. С появлением стандарта 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

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

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

• Видео инсрукция от Александра Сокирки.
• CSS переменные в препроцессорах.
• Переменные на нативном CSS
  • Синтаксис переменных на CSS
  • Где определяются переменные CSS?
  • Технические заметки о переменных CSS.
  • Функция var()
  • Использование переменных CSS для частичных значений
  • Использование: CSS переменные + функция calc()

  Видео инсрукция от Александра Сокирки.

  CSS переменные в препроцессорах.

  Препроцессоры CSS используют переменные уже более 10 лет. Ниже я покажу вам простые примеры как препроцессоры работают с переменными.

  В Sass (или SCSS) вы объявляете переменные следующим образом:

  $theme-color: #000; .element1 < border: 1px solid $theme-color; >.element2

  Обратите внимание на знак доллара ($). Первая строка – это объявление переменной и ее значения. Два блока, которые следуют, – это примеры использования переменных.

  Варианты в Less.js используют символ @

  @linkcolor: #000; a,.link

  А варианты в Stylus выглядят так:

  font-default = 14px body font-size font-default

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

  Переменные на нативном CSS

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

  :root < --main: #030303; --accent: #5a5a5a; >.container < color: var(--main); >.footer < border-color: var(--main); >.sidebar < color: var(--accent); >.module

  В данном примере мы определили две CSS-переменные: —main и —accent . Затем мы использовали каждую переменную на двух разных элементах, показывая гибкость, которую они предоставляют.

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

  Синтаксис переменных на CSS

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

  В отличие от обычных свойств CSS, переменные чувствительны к регистру. Это означает, что —main-color не равно —Main-Color . Допустимыми символами для имен являются буквы, цифры, подчеркивания и дефисы.

  Где определяются переменные CSS?

  CSS кастомные свойства часто определяются непосредственно на корневом элементе документа HTML или shadow DOM. Для этого используется селектор псевдо-класса :root .

  :root

  Однако переменные CSS не ограничиваются определением только на корневом элементе, и часто бывает полезным определять их в других местах. :root выбирается в качестве селектора, потому что он всегда указывает на верхний элемент в дереве DOM (будь то полный документ или shadow DOM).

  В большинстве случаев, можно получить тот же результат, определив кастомные свойства на элементе html (который является корневым элементом в документах HTML) или даже на элементе body . Использование :root позволяет писать код более устойчивым к будущим изменениям (например, если спецификация однажды добавит новый элемент в качестве корневого, то CSS останется неизменным) и, предположительно, позволяет таблице стилей применяться к другому типу документа, имеющему другой корневой элемент.

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

  .sidebar

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

  Технические заметки о переменных CSS.

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

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

  • Они решаются с помощью обычного наследования и каскадных правил CSS.
  • Вы можете использовать их в медиа-запросах и других условных правилах.
  • Вы можете определить их в атрибуте стиля элемента.
  • Их можно читать или устанавливать, используя функции CSS Object Model.

  Также стоит отметить, что вы можете вложить переменные CSS. Обратите внимание на следующий пример:

  :root < --main-color: red; --new-color: var(--main-color); >body

  Здесь мы определили переменную —main-color , а затем использовали это же имя переменной в качестве значения следующей переменной CSS.

  Также можно использовать ключевое слово !important в значении переменной CSS, но это относится только к “важности” самой переменной в отношении других определений переменных, а не к значению, используемому на одном или нескольких элементах в документе. Если это вызывает путаницу, рассмотрим следующий пример:

  :root < --main-color: red !important; --main-color: orange; >body

  В этом примере цвет фона будет “red“, несмотря на то, что значение “orange” появляется позже в определениях переменных. Но значение фона для элемента body не будет иметь никакой “важности“.

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

  Функция var()

  Вы уже видели использование функции var() в некоторых примерах выше. Но в var() есть больше возможностей, чем то, что я показал ранее.

  Во-первых, функция var() действительна только в значении свойства; имя свойства или селектор не может использовать переменную CSS. Кроме того, значение медиа-запроса не может использовать переменную CSS (например, @media (max-width: var(—my-var)) недопустимо).

  Функция var() принимает два аргумента:

  • Имя пользовательского свойства для включения
  • Значение запасного варианта, если пользовательское свойство недействительно

  Вот пример, где действует второй аргумент:

  :root < --main-colour: lightgreen; >body

  Обратите внимание, что в приведенном выше коде я написал имя переменной с использованием слова “colour” в британском или канадском написании, но при использовании переменной я использовал американское написание “color“. Это делает переменную технически недействительной, поэтому вместо нее применяется простой серый фон (#ccc).

  Также обратите внимание, что запасное значение может содержать свои собственные запятые. Например, если ваш запасной вариант – это набор шрифтов, это будет правильным способом его определения:

  :root < --main-font: Helvetica, Arial, sans-serif; >body

  Еще раз обращаю ваше внимание на то, что моя переменная имеет ошибку: она объявляет неизвестную переменную —main-type вместо —main-font . Это вызывает запасное значение, которое является альтернативным набором шрифтов. Таким образом, все, что находится после первой запятой (включая любые другие запятые), является запасным значением.

  Использование переменных CSS для частичных значений

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

  Например, можно разбить стек шрифтов:

  :root < --main-font: "Franklin Gothic"; --fallback-font: Gill Sans; --generic-font: sans-serif; >body

  В этом случае каждое значение переменной работает само по себе, но это демонстрирует суть. Давайте рассмотрим более выдуманный пример, используя запись цвета rgba() :

  :root < --rgba-red: 25; --rgba-green: 50; --rgba-blue: 105; --rgba-opacity: 0.4; >body

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

  Использование: CSS переменные + функция calc()

  Одним из полезных способов включения переменных CSS в ваши проекты является их использование вместе с функцией calc() . Как вы, возможно, знаете, calc() позволяет выполнять вычисления внутри значения. Таким образом, вы можете сделать что-то вроде:

  .element

  Пользовательские свойства CSS позволяют вам использовать calc() еще более эффективно, например, с предопределенными размерами. Вот пример:

  :root < --size: 240; >.module < width: calc(var(--size) * 1px); >.module-small < --size: 360; >.module-medium < --size: 720; >.module-large

  При использовании этих стилей я могу использовать наборы правил .module и .module-* внутри медиа-запросов, что позволяет мне показывать эти стили условно для конкретных размеров видовых экранов или других медиа-функций. Модули small/medium/large будут иметь те же классы, что и основной модуль, но только размер модуля будет перезаписываться по мере необходимости. В приведенном выше примере начальное значение размера 240 выступает в качестве своего рода значения по умолчанию, но я также могу передать 240px вторым аргументом в var() , чтобы он работал как резервное значение.

  Заключение. CSS переменные.

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

  Александр Сокирка

  Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.

  Как использовать переменные в CSS-стилях

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

  

  Алексей Кодов
  Автор статьи
  23 июня 2023 в 15:27

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

  Введение в CSS-переменные

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

  Пример использования переменной:

  :root < --main-color: #ff9800; >h1

  В этом примере мы определяем переменную —main-color со значением #ff9800 и используем её в стиле для элемента .

  Веб-разработчик: новая работа через 9 месяцев
  Получится, даже если у вас нет опыта в IT

  

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

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

  Пример с локальной переменной:

  div < --local-color: #4caf50; >div p

  В этом примере переменная —local-color доступна только для элементов

  , находящихся внутри элемента .

  Значения по умолчанию и каскадирование

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

  Пример с значением по умолчанию:

  :root < --default-color: #2196f3; >h1

  В этом примере, если переменная —main-color не определена, будет использоваться значение переменной —default-color .

  Также, благодаря каскадированию, мы можем переопределить значения переменных для определенных элементов:

  :root < --text-color: #000; >body < color: var(--text-color); >.dark-theme

  Здесь текст внутри элемента с классом .dark-theme будет белым, а у всех остальных элементов — чёрным.

  �� Теперь вы знаете, как использовать переменные в CSS-стилях и как они могут упростить вашу работу с кодом. Не забывайте экспериментировать и изучать новые возможности CSS!

  Похожие публикации:

  1. Как выключить бота в discord
  2. Как начать работать тестировщиком без опыта работы
  3. Как сделать чтобы в textbox c можно было ввести только цифры
  4. Как узнать что не хватает оперативной памяти