CSS 自定义属性（变量）-代码号

CSS 自定义属性（变量）教程

什么是 CSS 自定义属性？

CSS 自定义属性（也称为 CSS 变量或级联变量）是一种用于存储特定值的 CSS 特性，这些值可以在整个文档中重复使用。通过自定义属性，开发者可以定义包含特定值的实体，然后使用 var() 函数在整个样式表中引用这些值。

基本语法

定义自定义属性

自定义属性通过以两个连字符（--）开头的名称来定义，并且是大小写敏感的：

element {
  --primary-color: #3498db;
  --main-font-size: 16px;
}

应用范围

自定义属性的作用域由选择器决定。如果希望全局使用，可以在 :root 伪类上定义：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 1rem;
}

使用 var() 函数

var() 函数用于访问自定义属性的值：

.element {
  color: var(--primary-color);
  padding: var(--spacing-unit);
}

var() 函数的参数

var() 函数接受两个参数：

自定义属性名称（必需）：以两个连字符开头的属性名
回退值（可选）：当自定义属性无效时使用的替代值

/* 基本用法 */
.element {
  color: var(--primary-color, blue);
}

/* 嵌套回退值 */
.container {
  background-color: var(--bg-color, var(--fallback-bg, white));
}

/* 无效用法（不能有多个回退值） */
.invalid {
  /* 错误：不能有多个回退值 */
  background-color: var(--bg-color, red, gray);
}

实际应用示例

示例 1：基础颜色主题

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --text-color: #333;
      --spacing: 1rem;
    }
    
    body {
      font-family: Arial, sans-serif;
      color: var(--text-color);
      line-height: 1.6;
    }
    
    .header {
      background-color: var(--primary-color);
      padding: var(--spacing);
      color: white;
    }
    
    .button {
      background-color: var(--secondary-color);
      padding: calc(var(--spacing) / 2) var(--spacing);
      border: none;
      border-radius: 4px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>欢迎访问代码号编程学习平台</h1>
    <button class="button">开始学习</button>
  </div>
  <div class="content">
    <p>在这里，您可以找到各种编程教程和资源。</p>
  </div>
</body>
</html>

示例 2：响应式布局

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --container-width: 1200px;
      --gutter: 20px;
      --primary-font-size: 16px;
    }
    
    @media (max-width: 768px) {
      :root {
        --container-width: 100%;
        --gutter: 10px;
        --primary-font-size: 14px;
      }
    }
    
    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gutter);
    }
    
    .col-6 {
      grid-column: span 6;
    }
    
    body {
      font-size: var(--primary-font-size);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="col-6">
        <h2>编程基础教程</h2>
        <p>学习编程的基本概念和技巧。</p>
      </div>
      <div class="col-6">
        <h2>高级开发技术</h2>
        <p>深入了解各种编程语言的高级特性。</p>
      </div>
    </div>
  </div>
</body>
</html>

结合 calc() 函数使用

CSS 自定义属性可以与 calc() 函数结合使用，实现动态计算：

:root {
  --base-size: 16px;
  --spacing: 10px;
  --header-height: 60px;
}

.element {
  /* 计算字体大小 */
  font-size: calc(var(--base-size) * 1.2);
  
  /* 计算间距 */
  padding: calc(var(--spacing) * 2);
  
  /* 复杂计算 */
  height: calc(100vh - var(--header-height) - (var(--spacing) * 2));
}

示例 3：动态尺寸计算

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --base-font-size: 16px;
      --scale-factor: 1.2;
      --container-padding: 20px;
    }
    
    h1 {
      font-size: calc(var(--base-font-size) * var(--scale-factor) * 2);
    }
    
    h2 {
      font-size: calc(var(--base-font-size) * var(--scale-factor) * 1.5);
    }
    
    p {
      font-size: var(--base-font-size);
    }
    
    .container {
      width: calc(100% - (var(--container-padding) * 2));
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--container-padding);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>代码号编程学习</h1>
    <h2>掌握CSS自定义属性</h2>
    <p>学习如何使用CSS变量创建灵活、可维护的样式。</p>
  </div>
</body>
</html>

本节课程知识要点

定义与使用：CSS自定义属性以--开头，使用var()函数调用
作用域：自定义属性具有作用域，可在特定选择器或全局(:root)定义
回退机制：var()函数支持回退值，当变量未定义时使用
动态计算：可与calc()函数结合实现动态尺寸计算
响应式设计：通过媒体查询修改变量值，轻松实现响应式设计

实际应用建议

设计系统构建：使用CSS变量构建一致的设计系统
主题切换：通过修改变量值实现明暗主题切换
组件样式：为组件定义专用变量，提高可定制性
响应式调整：利用媒体查询修改变量值，简化响应式设计

本文标签：

CSS 自定义属性（变量）