CSS переменные. Как использовать при верстке сайта?

Автор Andrei Golubev
CSS переменные. Как использовать при верстке сайта?

Всем привет.

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

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

Давайте посмотрим на — это у нас есть, а бате стилизованный немножко потом контейнер сам стилизован заголовок текст и кнопка. А давайте мы с вами разберем где. В каких случаях нам нужно использовать CSS переменные и для чего вообще не нужны как они создаются во-первых если мы посмотрим на css-код там увидишь чтоб очень много вещей в этом коде повторяется например цвета мы видим Color F2 of2 он использует используется здесь потом если мы посмотрим и также прописан здесь, а потом например красный цвет для кнопки он прописан Border здесь красный цвет здесь прописан и для заголовка тоже, а прописан какой-то красный цвет то есть они эти цвета повторяются и в каждом элементе. И вам нужно соблюдать например этого в столовую гамма которые вы использовали на протяжении всего проекта и вдруг если вам захотелось поменять красный цвет вам придётся менять права многих местах. Но если бы у вас этот красный цвет хранился будет какой-то переменный самодельный, а то вам приходят только поменять значение этой переменной, тогда у вас везде бы поменялся бы этот красный цвет в случае необходимости. То есть — это упрощает нам на работу случай из давайте мы с. Вами просто посмотрим. Как создаются переменные для чего они нужны. А мы создаем свой. Пишем двоеточия пишем Root any Food are Rude так и таким образом мы с вами здесь будет декларировать глобальные переменные будет доступно по всем нашим CSS документе как они создаются пишем 2 дефиса 24 оставим и пишем название переменной пример. Мы хотим сделать своими руками для белого цвета пишем White и заносит сюда наш белый цвет который мы используем на сайте. Вот мы с вами создали первую переменную глобальную названием в. А теперь мы можем — это перемен вставлять там где нам нужен именно этот свет. Ну примерно нужен этот свет использовать здесь для того чтобы использовать свет Toyota переменную. Здесь нам нужно вызвать функцию которая называется в скобочках мы параметрам указываем название этой переменной Var. Вот теперь давайте мы принесём просто эту переменную вызов этой переменной и поставим её везде где нам — это нужно время вот здесь вот граница контейнера тоже белая, а потом уже белые здесь поставим и пока, что на этом всё. О'кей 1 переменным с вами создали. Теперь давайте мы сделаем ещё одну перемену назовём её red красный цвет. Мы вынесем тоже в отдельную. У нас свет красный вот такой вот вставляем его в этой переменной. А теперь давайте мы где использован такой красный цвет мы вставим переменную красного цвета используются у нас получается. Здесь пишем Red и. Здесь также красный свет используется у нас в заголовке вот здесь вот тоже оставляю как мы видим здесь нас ничего не поменялось — это как было так и остался теперь у нас эти два заняться в перемены, что очень удобно и теперь если мы хотим поменять красный цвет какой-нибудь другой. Нам друг не понравился этот. Краснодаром захотели поменять на другой как увидите сразу изменения и заголовка и кнопки меняется цвет красный цвет например. Мы решили выбрать всё-таки такой вот красные чуть поярче. Ну так и всё сохраняю нас теперь везде используются данные красный цвет на кнопки на заголовки тоже самое с белым и теперь можем его меня здесь у нас поменять цвет. Бордо и цвет текста давайте — это проверим если мы меняем цвет границ. У нас меняется цвет бартера. То есть если мы меняем цепь переменного — это у нас меняется этот свет везде где использовали переменную White давай всё вернём то, что было оставим как было OK цветок мы можем также заносить туда любые значения пример там размеры шрифтов размеры блоков и так далее давайте мы с вами сделаем например переменную регулятор 16 пикселей мы занесем эту переменную размер шрифта стандартный давайте мы эту переменную. Вызови 2010 вызываем здесь вот эти хранится стандартный размер шрифта для всего нашего документа в переменный и мы сможем его менять в будущем например при. Медиа запросах давайте мы ещё кое-что сделаем. Перед тем как мы напишем неделе поменяем переменные посмотрим как — это всё работает мы с вами ещё сделаем переменную Black Black. У нас есть чёрный цвет для фона мы можем тоже то вывести переменную и использовать данные переменную здесь вставляем перемена OK так потом, что мы ещё можно с вами сделать. Давайте посмотрим, что мы можем вынести так OK. Вроде бы мы всё давайте мы вынесем с вами тоже border-radius которые мы используем для кнопки в отдельную переменную по сколько например у вас тоже на сайте должен использоваться для. Всех элементов одинаково там для контейнеров для кнопок так далее чтобы не писать везде этот значение там 8 пикселей для кнопки 8 пикселей border-radius для картинки для блока border-radius в отдельную переменную 8 пикселей напишем радиус 8 пикселей и теперь — это переменный можем использовать. Везде где нам нужно например для и также можно добавить border-radius например для контейнера всего чтобы тоже у него был такой.

0 комментариев
0

Читайте также