Работа с CSS-переменными

Bliss.js предоставляет удобные методы для взаимодействия с CSS-переменными, позволяя динамически управлять стилями элементов без необходимости напрямую изменять CSS-файлы. Работа с CSS-переменными строится на использовании стандартного DOM API через удобные обертки Bliss.js, что упрощает чтение и запись переменных, а также их применение к различным элементам страницы.

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

CSS-переменные определяются в стиле через --имя-переменной и доступны через getComputedStyle. Bliss.js упрощает доступ с помощью метода cssVar().

Пример:

// Предположим, что в CSS определена переменная
// :root { --main-color: #3498db; }

let mainColor = Bliss('body').cssVar('--main-color');
console.log(mainColor); // Выведет: "#3498db"

Ключевые моменты:

cssVar() без второго параметра возвращает текущее значение переменной.
Можно использовать эту функцию на любом DOM-элементе, а не только на :root.
Возвращаемое значение всегда в формате, соответствующем CSS (например, rgb(), #hex или var()).

Установка и изменение переменной

Bliss.js позволяет задавать новое значение переменной через тот же метод cssVar(), передавая второй параметр:

Bliss('body').cssVar('--main-color', '#e74c3c');

После выполнения этого кода все элементы, использующие var(--main-color), автоматически обновят свой стиль.

Особенности применения:

Если переменная задана в :root, изменение на body не переопределяет глобальную переменную, а создаёт локальный контекст.
Для глобального изменения рекомендуется использовать селектор :root.

Bliss(':root').cssVar('--main-color', '#2ecc71');

Использование с динамическими вычислениями

Bliss.js поддерживает вычисление значений перед установкой переменной:

let hue = 200;
Bliss(':root').cssVar('--dynamic-color', `hsl(${hue}, 80%, 50%)`);

Такой подход особенно удобен при анимациях и интерактивных интерфейсах, где стиль зависит от состояния страницы.

Применение CSS-переменных к отдельным элементам

CSS-переменные позволяют задавать уникальные стили для конкретного блока, не трогая глобальные настройки:

Bliss('.card').cssVar('--card-bg', '#f1c40f');
Bliss('.card').cssVar('--card-border', '2px solid #f39c12');

Эти переменные могут использоваться в CSS так:

.card {
    background-color: var(--card-bg);
    border: var(--card-border);
}

Таким образом создаётся независимый визуальный стиль для каждого компонента.

Получение всех переменных элемента

Bliss.js не предоставляет прямого метода для перечисления всех переменных элемента, но можно комбинировать getComputedStyle и cssVar() для обхода всех свойств:

let styles = getComputedStyle(document.querySelector('body'));
let variables = {};
for (let i = 0; i < styles.length; i++) {
    let prop = styles[i];
    if (prop.startsWith('--')) {
        variables[prop] = styles.getPropertyValue(prop).trim();
    }
}
console.log(variables);

Это полезно для динамических интерфейсов, где требуется синхронизация JS и CSS-переменных.

Анимация с CSS-переменными

Bliss.js позволяет управлять переменными в сочетании с requestAnimationFrame для создания плавных анимаций:

let hue = 0;
function animateColor() {
    hue = (hue + 1) % 360;
    Bliss(':root').cssVar('--dynamic-color', `hsl(${hue}, 80%, 50%)`);
    requestAnimationFrame(animateColor);
}
animateColor();

Применение переменных в анимации облегчает переходы между цветами, размерами и другими стилями без перезаписи целых классов.

Интеграция с темами

Использование CSS-переменных с Bliss.js позволяет легко переключать темы интерфейса. Пример двух тем:

const lightTheme = {
    '--bg-color': '#ffffff',
    '--text-color': '#333333'
};

const darkTheme = {
    '--bg-color': '#2c3e50',
    '--text-color': '#ecf0f1'
};

function applyTheme(theme) {
    for (let key in theme) {
        Bliss(':root').cssVar(key, theme[key]);
    }
}

applyTheme(darkTheme);

Все элементы, использующие переменные var(--bg-color) и var(--text-color), мгновенно изменят свой стиль.