08
Авг
2019

Не упустите из виду переменные CSS

От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но после того, как я использовал их здесь и там, меня зацепило. В этом посте я расскажу о том, что убедило меня продолжить изучение переменных css и начать их использование в проектах.

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

Чтобы объявить переменные, определите их в селекторе и добавьте к имени переменной два дефиса (—):
div {
  --bgColor: deeppink;
}
Распространенный подход заключается в определении переменных с помощью селектора :root, таким образом вы определяете глобальную переменную:
:root {
  --bgColor: teal;
}
Чтобы применить переменные, используйте функцию var():
div {
  background: var(--bgColor);
}
Функция var() принимает второй параметр, который используется в качестве запасного варианта , если переменная не объявлена:
header {
  background: var(--bgColor);
  color: var(--color, beige);
}
Фрагменты кода выше дают: Не упустите из виду переменные CSS

Темы

С помощью переменных CSS создание темы становится простым. В зависимости от класса body мы можем установить для переменной соответствующее значение:
body.sunrise {
  --background-color: #fff;
  --text-color: #333;
}

body.sunset {
  --background-color: #333;
  --text-color: #fff;
}
Затем мы можем использовать эти переменные при стилизации элементов:
html,
body {
  background: var(--background-color);
  color: var(--text-color);
}
Если класс body изменится с sunriseor на sunset, переменные css будут каскадными для всех селекторов. В нашем случае мы перейдем к светлой или темной теме: Не упустите из виду переменные CSS

JavaScript API

Это, на мой взгляд, лучшая часть. Переменные CSS имеют JavaScript API для получения и установки переменных. Чтобы получить переменную, используйте метод getPropertyValue:
getComputedStyle(document.documentElement).getPropertyValue('--color')
Чтобы получить значение из элемента, сначала выберите этот элемент с помощью querySelector:
getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')
Чтобы установить значение переменной, используйте style.setProperty:
document.documentElement.style.setProperty('--color', 'red')
Чтобы установить значение для элемента:
document.querySelector('h1').style.setProperty('--color', 'blue')
Этот API открывает некоторые возможности для чистого использования переменных CSS. Я столкнулся с этим примером использования Дэвида К. пару дней назад в одной из его демонстраций XState по адресу https://codepen.io/davidkpiano/pen/zWrRye. Он использует переменные css для создания поля выбора, когда пользователь перемещает мышь по экрану. CSS окна выбора использует переменные, чтобы определить четыре угла (на основе начальной точки и текущей позиции мыши) блока:
.selectbox {
  left: calc(var(--mouse-x1));
  top: calc(var(--mouse-y1));
  width: calc((var(--mouse-x2) - var(--mouse-x1)));
  height: calc((var(--mouse-y2) - var(--mouse-y1)));

  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid currentColor;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}
Прослушиваем события мыши и обновляем точки мыши соответственно:
document.documentElement.style.setProperty(
  '--mouse-x1',
  ctx.selectArea.x1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y1',
  ctx.selectArea.y1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-x2',
  ctx.selectArea.x2 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y2',
  ctx.selectArea.y2 + 'px',
)
Не упустите из виду переменные CSS

Заключение

Если вы похожи на меня и не видели пользы переменных css или не знали, что они существуют, я надеюсь, что этот пост открыл вам дверь и вы начнете исследовать их варианты использования. Я случайно наткнулся на JavaScript API, но этот API открыл мне глаза на их использование в реальном мире, и я с нетерпением жду возможности применить их в будущем проекте. Автор: Tim Deschryver Источник: https://dev.to Редакция: Команда webformyself.
Share

Тебе может это понравится...