CSS 变量（CSS Variables）

核心知识点讲解

CSS 变量（也称为自定义属性）是 CSS3 中引入的一项强大功能，允许你定义可重用的值，然后在整个样式表中引用它们。CSS 变量的主要特点包括：

定义 CSS 变量

CSS 变量使用 -- 前缀定义，通常在 :root 伪类中声明全局变量：

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 1rem;
}

使用 CSS 变量

使用 var() 函数引用 CSS 变量：

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

.container {
  padding: var(--spacing);
}

CSS 变量的作用域

  • 全局变量：在 :root 或 html 选择器中定义，可在整个文档中使用
  • 局部变量：在特定选择器中定义，只能在该选择器及其子元素中使用

CSS 变量的继承

CSS 变量会像其他 CSS 属性一样继承，如果子元素没有定义自己的变量值，会继承父元素的值：

.parent {
  --text-color: blue;
}

.child {
  color: var(--text-color); /* 继承父元素的 --text-color 值 */
}

CSS 变量的默认值

var() 函数可以接受第二个参数作为默认值，当变量未定义时使用：

.element {
  color: var(--undefined-color, red); /* 如果 --undefined-color 未定义，使用 red */
}

CSS 变量与 JavaScript

CSS 变量可以通过 JavaScript 进行操作，实现动态样式变化：

// 读取 CSS 变量
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color');

// 设置 CSS 变量
document.documentElement.style.setProperty('--primary-color', '#ff5733');

实用案例分析

案例一：主题切换

使用 CSS 变量实现深色模式和浅色模式的切换：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主题切换示例</title>
  <style>
    /* 浅色主题变量 */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --primary-color: #3498db;
      --secondary-color: #f0f0f0;
    }

    /* 深色主题变量 */
    .dark-theme {
      --bg-color: #121212;
      --text-color: #e0e0e0;
      --primary-color: #64b5f6;
      --secondary-color: #1e1e1e;
    }

    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: all 0.3s ease;
    }

    header {
      background-color: var(--secondary-color);
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
    }

    .theme-toggle {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
    }

    .card {
      background-color: var(--secondary-color);
      padding: 1.5rem;
      border-radius: 8px;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>CSS 变量主题切换示例</h1>
    <button class="theme-toggle">切换主题</button>
  </header>
  <main>
    <div class="card">
      <h2>卡片标题</h2>
      <p>这是一张使用 CSS 变量样式的卡片。当你切换主题时，卡片的背景颜色和文字颜色会相应变化。</p>
    </div>
    <div class="card">
      <h2>另一张卡片</h2>
      <p>CSS 变量使得主题切换变得简单高效，无需编写大量重复的样式代码。</p>
    </div>
  </main>
  <script>
    const themeToggle = document.querySelector('.theme-toggle');
    const body = document.body;

    themeToggle.addEventListener('click', () => {
      body.classList.toggle('dark-theme');
    });
  </script>
</body>
</html>

案例二：响应式间距系统

使用 CSS 变量创建响应式间距系统：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式间距系统</title>
  <style>
    :root {
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-xxl: 3rem;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      :root {
        --spacing-xs: 0.125rem;
        --spacing-sm: 0.25rem;
        --spacing-md: 0.5rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-xxl: 2rem;
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: var(--spacing-md);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section {
      margin-bottom: var(--spacing-xl);
    }

    .card {
      background-color: #f0f0f0;
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-md);
      border-radius: 8px;
    }

    .btn {
      display: inline-block;
      padding: var(--spacing-sm) var(--spacing-md);
      margin-right: var(--spacing-sm);
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
    }

    .btn-large {
      padding: var(--spacing-md) var(--spacing-lg);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="section">
      <h1>响应式间距系统示例</h1>
      <p>本示例使用 CSS 变量定义了一套间距系统，并在小屏幕上自动调整间距大小。</p>
    </div>
    <div class="section">
      <div class="card">
        <h2>卡片标题</h2>
        <p>这是一张使用 CSS 变量设置间距的卡片。卡片的内边距和外边距都使用了变量定义的值。</p>
        <div>
          <a href="#" class="btn">普通按钮</a>
          <a href="#" class="btn btn-large">大按钮</a>
        </div>
      </div>
      <div class="card">
        <h2>另一张卡片</h2>
        <p>当你调整浏览器窗口大小时，卡片的间距会自动适应屏幕尺寸。</p>
      </div>
    </div>
  </div>
</body>
</html>

案例三：动态字体大小系统

使用 CSS 变量创建动态字体大小系统：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态字体大小系统</title>
  <style>
    :root {
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-md: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-xxl: 1.5rem;
      --font-size-xxxl: 2rem;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      :root {
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-xxl: 1.375rem;
        --font-size-xxxl: 1.75rem;
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: var(--font-size-md);
      line-height: 1.6;
      padding: 1rem;
    }

    h1 {
      font-size: var(--font-size-xxxl);
      margin-bottom: var(--font-size-lg);
    }

    h2 {
      font-size: var(--font-size-xxl);
      margin-bottom: var(--font-size-md);
    }

    h3 {
      font-size: var(--font-size-xl);
      margin-bottom: var(--font-size-sm);
    }

    p {
      margin-bottom: var(--font-size-md);
    }

    small {
      font-size: var(--font-size-sm);
    }

    .text-xs {
      font-size: var(--font-size-xs);
    }

    .text-sm {
      font-size: var(--font-size-sm);
    }

    .text-md {
      font-size: var(--font-size-md);
    }

    .text-lg {
      font-size: var(--font-size-lg);
    }

    .text-xl {
      font-size: var(--font-size-xl);
    }

    .text-xxl {
      font-size: var(--font-size-xxl);
    }

    .text-xxxl {
      font-size: var(--font-size-xxxl);
    }
  </style>
</head>
<body>
  <h1>动态字体大小系统</h1>
  <p>本示例使用 CSS 变量定义了一套字体大小系统，并在小屏幕上自动调整字体大小。</p>
  
  <h2>二级标题</h2>
  <p>这是一个使用默认字体大小的段落。</p>
  
  <h3>三级标题</h3>
  <p>当你调整浏览器窗口大小时，所有文本的字体大小会自动适应屏幕尺寸。</p>
  
  <div>
    <p class="text-xs">超小文本</p>
    <p class="text-sm">小文本</p>
    <p class="text-md">中等文本</p>
    <p class="text-lg">大文本</p>
    <p class="text-xl">超大文本</p>
    <p class="text-xxl">特大文本</p>
    <p class="text-xxxl">最大文本</p>
  </div>
</body>
</html>

总结

CSS 变量是 CSS3 中一项非常实用的功能，它具有以下优势：

  1. 减少代码重复：通过定义可重用的值，避免在样式表中重复相同的数值
  2. 提高可维护性：只需修改一个变量值，即可影响所有使用该变量的地方
  3. 支持动态变化：可以通过 JavaScript 动态修改变量值，实现交互效果
  4. 响应式设计：可以在媒体查询中修改变量值，实现响应式布局
  5. 作用域控制：支持全局变量和局部变量，灵活控制变量的使用范围

CSS 变量的应用场景非常广泛，包括但不限于：

  • 主题切换（浅色/深色模式）
  • 响应式设计
  • 组件库开发
  • 动画效果
  • 与 JavaScript 交互的动态样式

通过合理使用 CSS 变量，你可以编写更加简洁、高效、可维护的 CSS 代码，提高开发效率并改善用户体验。

« 上一篇 CSS3 形状与布局 - shape-outside 属性 下一篇 » 媒体查询（Media Queries）
↑