Начало работы с переменными CSS

Эта статья была первоначально опубликована на моем блог . Не стесняйтесь проверять это

Если вы использовали SASS или другие препроцессоры CSS, вы, возможно, уже использовали переменные. Переменные CSS (также называемые пользовательскими свойствами) являются собственной реализацией их в браузере.

Переменные CSS должны быть объявлены с помощью - Префикс к имени.

:root {
    --primary-color: #eaefed;
    --text-color: #001100;
}

Когда мы хотим получить к ним доступ, нам просто нужно использовать var функция Первый аргумент var Функция – это имя переменной. Если переменная недействительна, мы можем передать значение задержки в качестве второго аргумента.

.link {
    border: 1px solid var(--primary-color);
    color: var(--text-color, #111000); 
    /* if --text-color is invalid,fallback value #111000 is used */
}

Сфера действия переменной

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

Например, давайте объявим переменную с именем --btn-Danger-Color в классе Битн . Если вы попытаетесь получить доступ к переменной --btn-Danger-Color В другом классе из своего масштаба он будет недействительным. Потому что применение --btn-Danger-Color только в btn учебный класс

.btn {
    --btn-danger-color: #FF4136;
    background-color: var(--btn-danger-color);
}
.link {
    background-color: var(--btn-danger-color, green); 
    /* Background color is green because --btn-danger is invalid */
}

Доступ и изменение переменных CSS с помощью JavaScript

Чтобы получить доступ или изменить переменные CSS через JavaScript, мы можем использовать два метода

• GetPropertyValue
• SetProperty

Получение переменного значения CSS

Чтобы получить значение переменной CSS, мы можем использовать GetPropertyValue метод

const btn = document.querySelector('.btn');

let btnDangerBg = getComputedStyle(element).getPropertyValue("--btn-danger-color"); 

console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS

Чтобы объявить переменные CSS в : корень , вы можете использовать document.queryselector (': root');

Изменение значения переменной CSS

Чтобы установить значение переменной CSS из JavaScript, мы можем использовать SetProperty метод

  element.style.setProperty("--variable-name", value)

Давайте напишем небольшую функцию, чтобы изменить Кнопка Цвет фона к фиолету с помощью SetProperty метод

function changeColorToPurple(){
   //Set the CSS variable value
  btn.style.setProperty("--btn-danger-color", "purple")
}

Не забудьте связать это с HTML.

Change Color

Демо

Я добавляю встроенный Repl Для приведенного выше кода, чтобы вы могли играть с ним.

Благодарю вас.

Ссылка

CSS пользовательские свойства – mdn

    [Every thing you need to know about CSS variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)

Оригинал: “https://dev.to/bgopikrishna/getting-started-with-css-variables-5ejk”