当前位置：首页 > article >正文

CSS系列（20）-- 自定义属性详解

article 2024/12/23 17:44:54

前端技术探索系列：CSS 自定义属性详解 🎨

致读者：探索 CSS 变量的魅力 👋

前端开发者们，

今天我们将深入探讨 CSS 自定义属性（CSS Variables），学习如何利用它们创建更灵活的样式系统。

基础概念 🚀

变量定义与使用

/* 全局变量定义 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 8px;
    --border-radius: 4px;
    --transition-timing: 0.3s ease;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    transition: all var(--transition-timing);
}

/* 局部变量 */
.card {
    --card-padding: 1rem;
    --card-bg: #fff;
    
    padding: var(--card-padding);
    background: var(--card-bg);
}

回退值处理

/* 基础回退 */
.element {
    color: var(--undefined-color, #000);
}

/* 链式回退 */
.element {
    background: var(--theme-background, var(--fallback-bg, #fff));
}

/* 计算值回退 */
.element {
    margin: calc(var(--spacing, 16px) * 2);
}

动态特性 🎯

媒体查询中的变量

/* 响应式变量 */
:root {
    --container-width: 100%;
}

@media (min-width: 768px) {
    :root {
        --container-width: 750px;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-width: 960px;
    }
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

主题切换

/* 亮色主题 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --border-color: #dddddd;
}

/* 暗色主题 */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #444444;
}

/* 使用主题变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.card {
    border: 1px solid var(--border-color);
}

JavaScript 交互 💫

变量操作

// 获取变量值
const getVariable = (name) => {
    return getComputedStyle(document.documentElement)
        .getPropertyValue(`--${name}`).trim();
};

// 设置变量值
const setVariable = (name, value) => {
    document.documentElement.style
        .setProperty(`--${name}`, value);
};

// 示例：主题切换
class ThemeManager {
    constructor() {
        this.themes = {
            light: {
                '--bg-color': '#ffffff',
                '--text-color': '#333333'
            },
            dark: {
                '--bg-color': '#1a1a1a',
                '--text-color': '#ffffff'
            }
        };
    }

    setTheme(themeName) {
        const theme = this.themes[themeName];
        if (!theme) return;

        Object.entries(theme).forEach(([property, value]) => {
            setVariable(property.replace('--', ''), value);
        });
    }

    toggleTheme() {
        const isDark = getVariable('bg-color') === '#1a1a1a';
        this.setTheme(isDark ? 'light' : 'dark');
    }
}

动态样式生成

class DynamicStyles {
    constructor() {
        this.init();
    }

    init() {
        this.generateColorPalette();
        this.setupResponsiveVars();
    }

    generateColorPalette() {
        const baseColor = '#007bff';
        const steps = 9;

        for (let i = 1; i <= steps; i++) {
            const lightness = i * 10;
            setVariable(
                `primary-${i}00`,
                this.adjustColor(baseColor, lightness)
            );
        }
    }

    setupResponsiveVars() {
        const breakpoints = {
            sm: 576,
            md: 768,
            lg: 1024,
            xl: 1280
        };

        const updateVars = () => {
            const width = window.innerWidth;
            setVariable('viewport-width', `${width}px`);
            
            Object.entries(breakpoints).forEach(([name, value]) => {
                setVariable(
                    `is-${name}`,
                    width >= value ? '1' : '0'
                );
            });
        };

        window.addEventListener('resize', updateVars);
        updateVars();
    }

    adjustColor(color, lightness) {
        // 颜色调整逻辑
        return color; // 简化示例
    }
}

实际应用示例 🌟

动态表单样式

.form-control {
    --input-height: 40px;
    --input-padding: 8px;
    --input-border: 1px solid var(--border-color);
    --input-radius: 4px;
    --input-focus-color: var(--primary-color);
    
    height: var(--input-height);
    padding: var(--input-padding);
    border: var(--input-border);
    border-radius: var(--input-radius);
    transition: border-color 0.2s;
}

.form-control:focus {
    --input-border: 1px solid var(--input-focus-color);
}

/* 尺寸变体 */
.form-control--small {
    --input-height: 32px;
    --input-padding: 4px;
}

.form-control--large {
    --input-height: 48px;
    --input-padding: 12px;
}

动态布局系统

.grid {
    --columns: 12;
    --gap: 1rem;
    
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--columns), 1fr);
}

/* 响应式列数 */
@media (max-width: 768px) {
    .grid {
        --columns: 6;
    }
}

@media (max-width: 576px) {
    .grid {
        --columns: 4;
    }
}

/* 网格项 */
.grid-item {
    --span: 1;
    grid-column: span var(--span);
}

.grid-item--wide {
    --span: 2;
}