Главная » Статьи » Не упустите из виду переменные CSS

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

Не упустите из виду переменные 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.