Как сделать переменную в css

Как вставить переменную vue.js в css или scss?

В коде представлен один из способов, как я меняю переменную цвета new_color , которая приходит с сервера, но такой способ мне не очень подходит, так как кода слишком много и везде вставлять :style , я думаю, как-то неправильно. Есть ли способ лучше, чтобы можно было менять одну, в моем случае — scss переменную $main-color , которая отвечает за множество стилей? Как-то я могу воздействовать на переменную $main-color из js кода или придется писать везде :style ?

Можно воспользоваться возможностями обычных css переменных. Например: Создадим переменную для цвета

После чего из js мы сможем получить к ней доступ через

Ну и естественно можно изменять её значение на необходимое

Таким образом мы переопределим глобальную css переменную. Остальное уже дело техники, просто подставить вместо green свой цвет, который приходит с сервера.

Основные варианты использования CSS-переменных (Custom Properties)

CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.

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

Варианты использования

1. Определение переменных

Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):

2. Переопределение переменных

В примере показан кейс, когда при наведении на элемент, должен меняться цвет. Для этого мы переопределяем переменную —color по событию :hover :

Второй пример показывает переопределение переменной в @media выражении. К сожалению, мы не можем вынести 1024px в переменную и использовать ее в @media — это является одним из ограничений CSS переменных.

3. Локальный fallback

Представьте, что вы вызываете переменную —color-green , а ее не существует. Страшного не случится, но заданное CCS-свойство не отработает. Для подстраховки можно задать резервное значение вторым аргументом. Это значение также может быть CSS-переменной:

4. Привязка переменных

При объявлении переменных могут использоваться другие переменные:

5. Переменные в calc()

В calc() можно перемножать числа со значениями в единицах измерения, н-р: px .

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

В примере показано, как перемножается 2 на 10px и в итоге получается 20px. Не важно, используем мы для этого обычные значения или CSS-переменные — результат будет одинаковый:

К примеру, у нас есть переменная —font: 20 . Но без указания единицы измерения мы не сможем ее корректно использовать в font-size .

Это можно решить с помощью calc() . Для преобразования числа в px , к примеру, достаточно умножить число на 1px в calc() :

6. Прозрачность в цветовых функциях

Задания цвета — самый распространенный кейс использования переменных.

Вот стандартный пример по использованию hex-цвета для определения значения переменной:

Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:

#rrggbbaa hex color notation

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

При использовании переменных, удобнее это делать функцией rgba() , которая принимает 4 числовых значения для:

Альфа-канала для задания прозрачности

На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!

Поэтому, задание в переменной значения цветов для Red, Green, Blue — вполне допустимо.

Вызовем функцию rgba() с переменной —color-blue—rgb . Для rgba() не хватает четвертого аргумента задающего прозрачность — добавим его через запятую:

На выходе собираются аргументы для rgba() : значения из переменной и альфа-канала.

По итогу получаем цвет:

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

Кроме rgba() можно использовать и hsla() . Это не так удобно, но как вариант, можно попробовать.

Определяем переменные с базовыми значениями для основных параметров hsla(): —hue , —saturation , —lightness , —opacity .

При использовании, указываем все базовые параметры в селекторе.

Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).

На выходе получаем цвет:

7. Переменные в SVG

С помощь переменных мы также можем изменять цвет внутри SVG: fill или stroke . Сложность заключается в том, что изображение SVG должно быть инлайново встроено на страницу, но при использовании сборщиков — это не проблема.

Итак, имеем SVG-элемент на странице, у которого в fill указана переменная —color :

И саму переменную —color в CSS:

Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:

Использование с JavaScript. API CSS Style Declaration

CSS переменные работают в runtime, в отличие переменных препроцессоров. Это значит, что мы можем получить к ним доступ в процессе работы приложения через JavaScript.

Рассмотрим, как можно работать с CSS переменными через JavaScript:

В CSS у нас есть 2 переменные:

А вот код на JavaScript:

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

Вычисленные свойства

В коде выше я затронул тему "Вычисленных свойств". Рассмотрим подробнее: для этого создадим небольшой пример:

Единицы измерения можно подразделить на абсолютные и относительные:

Абсолютные — это пиксели ( px ), которые привязываются к разрешению экрана.

Относительные (н-р: rem ) формируются относительно заданного параметра.

Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке "Elements", то сможем увидеть это преобразование:

В секции Styles — значения в том виде, в котором мы их указали в CSS (относительные).

В секции Computed — значения, приведенные к абсолютным единицам измерения. Функцией getComputedStyle в JavaScript мы как раз таки и получаем эти вычисленные значения.

Так для чего же может понадобиться работать с CSS-переменными через JavaScript? Самый распространенный кейс — это задание цветовой схемы: при переключении схемы мы обращаемся к CSS-переменной и просто изменяем ее значение. Все значения, где используется эта переменная, будут обновлены.

Небольшую демку по изменению цветовой схемы можно посмотреть здесь.

Проверка поддержки переменных

Достоинства и ограничения

Работают в runtime, в отличие от переменных препроцессоров

Можно обратиться из JavaScript

В именах обычных свойств CSS: var(—side): 10px

В значениях media-запросов: @media screen and (min-width: var(—desktop))

В подстановке URL: url(var(—image))

Нельзя сбрасывать значения всех переменных —: initial

Заключение

Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!

Как в CSS сделать переменную в названии класса?

Здравствуйте.
Интересует, есть ли способ в CSS сделать переменную в названии класса?
Например, есть класс .article в название которого автоматически добавляется число: .article-1 , .article-2 . .article-66 и т. д. Необходимо им всем добавить, например, одинаковый цвет текста: .article-(n) . Как это можно сделать средствами CSS?

Предвижу вопрос «Зачем так сложно?». Дело в том, что есть некая конструкция:

Нужно первую букву в первом абзаце каждой статьи окрасить в определенный цвет.
Я пытался сделать так:

Но окрашивается первая буква, почему-то, только в первой статье с классом .post . Поэтому и пришла в голову идея с переменной, но, как это реализовать не знаю.

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

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