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

1656673570 izuchite peremennye css za 5 minut

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

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

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

Хотите изучить переменные CSS? Вот мой бесплатный курс из 8 частей!

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

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

1*03NPOHNBLqOn5r22HrvlyQ

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

1*de4-CIacmaMo9PO6PlTkyQ

Это не только облегчит чтение вашего кода, но и придаст вам больше гибкости, если вы хотите изменить этот цвет.

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

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

А теперь начнём изучать переменные CSS!

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

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

Поскольку переменные наследуются, это сделает вашу переменную доступной для всей программы, поскольку все ваши элементы DOM являются потомками <html> тег.

:root {  
  --main-color: #ff6f69;  
}

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

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

#title {  
  color: var(--main-color);  
}

И это придаст вашему титулу #f6f69 цвет:

1*gv5ZAXzaLMT2nQVvmBei5w

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

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

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

.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

Еще одно преимущество жизни в DOM заключается в том, что вы можете получить доступ к переменным с помощью JavaScript и даже обновить их, например, на основе взаимодействия пользователя. Это идеально, если вы хотите дать пользователям возможность изменять ваш сайт (например, изменять размер шрифта).

Давайте продолжим пример с начала этой статьи. Захват переменной 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, поскольку наша аудитория достаточно подкована в технике и использует современные браузеры.

1*oCt-OblOjurKizk-SAITwg

Ладно, это было все. Надеюсь, вы чему-то научились!

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

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.

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

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

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