Переменные в CSS || CSS variables || функция var()

Всем привет!

В этом видео вы узнаете, что такое CSS переменные.

Итак, давайте разбираться с этим на примерах.

Давайте для начала создадим разметку.

Внутри body создадим section.

Внутри section у нас будет заголовок второго типа с произвольным текстом, допустим, на 8 слов.

Затем будет идти заголовок третьего типа с произвольным текстом на 10 слов.

Затем будет идти, допустим, параграф с произвольным текстом на 25 слов.

Будет идти, допустим, div с классом A. И туда мы добавим также произвольный текст на 50 слов.

И еще один div с классом B, допустим.

Также с произвольным текстом на 80 слов, допустим.

Это будет такая вот у нас разметка.

Давайте откроем браузер, посмотрим, что у нас добавилось на страницу.

Итак, мы видим наши элементы, заголовок второго, типа третьего, параграф и два дела с текстом внутри.

Давайте свернем браузер в половину и везу в студию код.

И перейдем в стиле.

И обратимся, допустим, для начала к Body.

И для Body укажем Background Color.

И цвет давайте выберем, давайте перейдем на сайт.

Color Resources, выберем ресурсы и X-Generator.

Здесь нажмем Refresh и вот у нас сгенерировались такие вот цветовые кода.

Давайте выберем, допустим, какой-то из этих.

Ставим его сюда.

Перейдем на страницу.

Мы видим, что Background применился для страницы.

С таким вот цветовым кодом.

Затем давайте обратимся к заголовку второго типа.

И давайте опять же возьмем какой-то цвет.

Допустим, такой вот.

Укажем Color.

И добавим этот цвет.

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

Давайте теперь к заголовку третьего типа также изменим цвет.

Допустим, выберем какой-то из...

вот цвет допустим видим также есть применение для параграфа давайте укажем допустим такой цвет также есть и давайте для div обратимся к div с и классом и и для него создадим

тень допустим box-shadow пусть будет у нас 0 смещение по горизонтали 1 rem по вертикали 2 rem размытия и допустим укажем rgba значение цвета 0,0 и на 80% будет у нас затемнение перейдем видим вот у нас добавился такой такая вот тень для этого блока давайте сюда укажем

Также еще пэддинги внутренние, отступая на 1 рэм внутри этого блока.

И укажем margin-bottom 2 рэм, чтобы первый див отступил от второго.

Теперь давайте обратимся к второму диву с классом B. И для него, допустим, создадим границу.

Укажем border.

И border у нас будет, допустим, 0.2 рэм.

Сплошная.

и выберем какой-то вот цвет например вот такой вот добавим сюда посмотрим и так мы видим граница добавилась также давайте сюда укажем внутренние отступы на 2rem так есть и давайте еще для первого дива с классом A добавим background-color и выберем допустим такой вот цвет

скажем, сюда.

Итак, эти все стили у нас добавились на страницу, как мы видим, все это есть.

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

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

То есть, допустим, это 4 и a7a4, то есть

Такой код как бы нелегко запомнить.

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

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

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

Это как бы эти все цвета не так легко запомнить, особенно если они состоят из цифр и букв.

И, скажем так, на помощь нам приходят CSS-переменные.

Давайте посмотрим, как это все у нас работает и применяется.

Итак, создаем CSS-переменную мы с помощью псевдокласса root.

Точнее, добавляем.

Выберем псевдокласс root.

И внутри него нам нужно...

добавить саму переменную.

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

То есть, например, ставим, как добавляется переменная.

Мы ставим тире, тире, background, указываем bg, color, clr, то есть, означает color, ставим точку,

И отсюда давайте возьмем этот цветовой код, скопируем его и вставим сюда.

Так.

Теперь.

Также давайте еще создадим переменную для заголовка второго типа.

Ставим тире тире заголовок второго типа color.

И интуитивно понятно, что это цвет для заголовка второго типа.

Давайте отсюда скопируем этот цветовой код и вставим сюда.

Также создадим для заголовка третьего типа.

скопируем ставим сюда также этот цвет для параграфа то есть укажем параграф в color сюда добавим этот цветовой код также создадим для тени для блока box шейду и отсюда скопируем значение

Ставим их сюда.

И давайте еще для Border также.

Создадим переменную Border и добавим значение вот этого.

Там будет у нас идти толщина, стиль и соответственно цвет для границы.

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

И посмотрим, как добавляются у нас переменные.

Мы видим, стили очистились.

Давайте теперь обратимся к body опять же.

И укажем background-color.

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

Мы выбираем var.

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

В данном случае у нас для body background-color и мы видим bg-color, то есть мы выбираем и цвет применяется.

Затем мы обращаемся к заголовку второго типа и здесь указываем color, выбираем var, то есть переменную и находим, либо же мы просто запоминаем, что это заголовок второго типа и цвет для него выбираем и цвет применяется.

заголовку третьего типа точно также мы указываем color переменную и заголовок третьего типа все легко и просто не нужно искать в коде эти значения цветовые не нужно их выписывать где-то отдельно либо же запоминать точно также мы параграфу давайте добавим цвет укажем color и выберем переменную для параграфа затем

Точно так же мы можем обратиться к нашему div с классом A и для него указать box-shadow свойства.

Выберем var и укажем box-shadow значение.

Как мы видим, применился у нас стиль.

Далее мы можем указать margin-bottom в rm отступы.

Добавить, например, background-цвет для него.

какой-то другой и так далее то есть теперь давайте еще посмотрим для div с классом b как работает border точно так же мы обращаемся к свойству border указываем переменную и находим ту переменную либо же ее просто вводим здесь border и у нас применяются границы также добавляем внутренние отступы и какие-то еще стили таким вот образом у нас работают css

Переменные в CSS.

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

Сколько бы у нас не было секций, сколько бы у нас не было элементов.

Заголовка второго типа, третьего параграфа, границ, тени и так далее.

Сюда можно еще добавлять также разные свойства и функции.

Значения соответственно и также переменные для них.

То есть это просто как элементарные примеры.

Вы уже можете придумать свои какие-то под свои нужды, под свой дизайн и так далее.

Надеюсь, идею вы уловили.

Итак, на этом все.

Надеюсь, это видео было полезным для вас.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.