🎨 第十二章：CSS 变量与设计系统

掌握 CSS 变量，构建可维护的设计系统

12.1 定义与使用变量

CSS 变量（自定义属性）允许你定义可重用的值，使样式更加一致和易于维护。

基本语法

/* 定义变量 */
:root {
    --primary-color: #3498db;
    --font-size: 16px;
    --spacing: 16px;
}

/* 使用变量 */
.button {
    background: var(--primary-color);
    font-size: var(--font-size);
    padding: var(--spacing);
}

变量的命名规则

变量示例

本页面就是使用 CSS 变量构建的，包括颜色、字体、间距等。

12.2 变量的作用域

全局作用域

在 :root 中定义的变量是全局的，可在整个文档中使用。

局部作用域

在特定选择器中定义的变量只在该选择器及其后代中有效。

/* 全局变量 */
:root {
    --primary-color: #3498db;
}

/* 局部变量 */
.card {
    --card-bg: #f8f9fa;
    background: var(--card-bg);
}

.card.dark {
    --card-bg: #2c3e50;
}

12.3 利用变量实现深色模式

CSS 变量是实现深色模式的最佳方案，配合媒体查询可以轻松切换主题。

使用 prefers-color-scheme

:root {
    --primary-color: #3498db;
    --text-color: #333;
    --background-color: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #2980b9;
        --text-color: #f8f9fa;
        --background-color: #2c3e50;
    }
}

手动切换主题

/* JavaScript 切换主题 */
<script>
    // 切换主题函数
    function toggleTheme() {
        document.documentElement.classList.toggle('dark-theme');
    }
</script>

/* CSS 样式 */
.dark-theme {
    --primary-color: #2980b9;
    --text-color: #f8f9fa;
    --background-color: #2c3e50;
}

12.4 构建原子化 CSS 或设计令牌

设计令牌 (Design Tokens)

设计令牌是设计系统中的基本构建块，包括颜色、字体、间距、圆角等。

/* 颜色令牌 */
:root {
    /* 主色调 */
    --color-primary-50: #e3f2fd;
    --color-primary-100: #bbdefb;
    --color-primary-500: #3498db;
    --color-primary-900: #1565c0;
    
    /* 间距令牌 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 字体令牌 */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    
    /* 圆角令牌 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

原子化 CSS 类

/* 原子化 CSS 类 */
.text-primary {
    color: var(--color-primary-500);
}

.bg-primary {
    background: var(--color-primary-500);
}

.p-md {
    padding: var(--spacing-md);
}

.rounded-md {
    border-radius: var(--radius-md);
}

实战案例

主题切换

:root {
    --theme-light: #f8f9fa;
    --theme-dark: #2c3e50;
    --text-light: #333;
    --text-dark: #f8f9fa;
}

body {
    background: var(--theme-light);
    color: var(--text-light);
    transition: all 0.3s ease;
}

body.dark-theme {
    background: var(--theme-dark);
    color: var(--text-dark);
}

响应式设计

:root {
    --container-width: 100%;
    --grid-columns: 1;
}

@media screen and (min-width: 768px) {
    :root {
        --container-width: 720px;
        --grid-columns: 2;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --container-width: 960px;
        --grid-columns: 3;
    }
}

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

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

动手练习

练习 1：CSS 变量基础

  1. 创建一个 CSS 变量系统，包含颜色、字体、间距等
  2. 在页面中使用这些变量
  3. 尝试修改变量值，观察整个页面的变化

练习 2：深色模式

  1. 使用 CSS 变量实现深色模式
  2. 添加一个按钮来切换主题
  3. 确保所有元素都能正确响应主题变化

练习 3：设计系统

  1. 创建一套完整的设计令牌
  2. 基于这些令牌创建原子化 CSS 类
  3. 使用这些类构建一个简单的页面
← 上一章：过渡与动画 下一章：高级视觉效果 →