CSS变量食用说明

叶知秋水
461 阅读10分钟

variables-css.png

CSS变量（CSS Variables），也称为自定义属性，是CSS中一个强大的特性，它允许开发者定义可重用的值，从而提高样式表的灵活性和效率。在本文中，我们将探讨CSS变量的基本概念、使用方法以及在实际Web开发中的应用。

一、CSS变量的基本概念

CSS变量是通过--前缀定义的，它们可以存储任何类型的值，如颜色、大小、位置等。这些变量可以在CSS样式表中任何地方使用，甚至可以在不同的样式规则之间共享。

CSS变量的定义和使用遵循以下规则：

  1. 变量名必须以两个破折号（--）开头。
  2. 变量名对大小写敏感。
  3. 变量值可以是任何合法的CSS值。

例如：

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

在上面的例子中，--primary-color和--font-size是两个定义在:root伪类中的CSS变量。

二、CSS变量的使用方法

:root是一个伪类，它匹配文档的根元素。对于HTML文档来说，根元素就是<html>元素。虽然在同一个样式表中可以多次使用:root伪类来定义CSS变量或样式，但它们实际上都应用于同一个根元素，即<html>元素。因此，从技术上讲，你不能有多个不同的:root元素，但可以在不同的地方多次定义或覆盖:root伪类的样式。

挂在:root下的样式也叫全局变量。

类似的，也存在局部变量，作用域可以通过选择器的范围来控制，例如

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

.parent .child {
  color: var(--local-color); /* 有效，可以访问局部变量 */
}

也可以使用CSS层叠层（@layer）规则，可以创建具有不同优先级的作用域。

@layer base {
  :root {
    --base-color: pink;
  }
}

@layer theme {
  :root {
    --theme-color: var(--base-color);
  }
}

2.1 常规用法

要使用CSS变量，首先需要定义它。这通常在:root伪类中完成，以确保变量在全局范围内可用。然后，你可以通过var()函数在任何CSS属性中引用这些变量。

例如：

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

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

在上面的例子中，我们定义了两个变量：--primary-color和--font-size。然后，在.body类中，我们使用var()函数引用这些变量。

2.2 变量默认值

CSS变量还可以具有默认值，如果变量未定义或无效，则使用默认值：

.element {
  color: var(--undefined-variable, #000000);
}

在这个例子中，如果--undefined-variable未定义，则元素的颜色将为黑色。

2.3 变量嵌套

也可以在变量中嵌套其他变量，从而实现更复杂的样式定义。

:root {
  --main-color: #007bff;
  --secondary-color: var(--main-color);
}

button {
  background-color: var(--secondary-color);
}

2.4 媒体查询中使用

CSS变量可以在媒体查询中定义和使用，从而实现响应式设计。

:root {
  --spacing: 16px;
}

@media (min-width: 768px) {
  :root {
    --spacing: 24px;
  }
}

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

2.5 脚本中使用

通过JavaScript可以动态更新CSS变量的值，使得样式可以根据用户交互实时变化。

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: #007bff;
    }
    .button {
      background-color: var(--primary-color);
    }
  </style>
</head>
<body>
  <button class="button">Click me</button>
  <script>
    document.querySelector('.button').addEventListener('click', function() {
      document.documentElement.style.setProperty('--primary-color', '#ff0000');
    });
  </script>
</body>
</html>

2.6 内联样式中使用

在内联样式中，不能直接定义CSS变量，但可以引用已经在其他地方定义的CSS变量。为了在内联样式中使用CSS变量，你需要确保这些变量已经在全局范围或某个容器中定义好。

一旦变量定义好，就可以在内联样式中引用它们。使用var()函数来引用CSS变量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --primary-color: #007bff;
      --font-size: 16px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <p style="color: var(--primary-color); font-size: var(--font-size);">
    This is a paragraph with inline styles using CSS variables.
  </p>
</body>
</html>

三、应用场景

CSS变量在Web开发中的应用场景非常广泛，以下是一些常见的应用场景：

3.1 主题切换

CSS变量可以用于实现网站的多主题切换，通过定义不同的颜色、字体和其他样式属性，可以让用户在不同的主题之间切换。例如，网站可以提供亮色主题和暗色主题，用户可以根据自己的喜好进行选择。

在设计一个完善的主题系统时，定义合理数量的CSS变量并组织好这些变量非常重要。这些变量应该涵盖不同的UI元素和状态，以便灵活地适应各种设计需求和变化。

:root {
 /* 颜色 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
  --text-color: #000000;
  --border-color: #dddddd;

  /* 尺寸和间距 */
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;

  /* 排版 */
  --font-family-base: 'Arial, sans-serif';
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* 边框和阴影 */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --box-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --box-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 10px 20px rgba(0, 0, 0, 0.2);

  /* 状态 */
  --primary-color-hover: #0056b3;
  --primary-color-active: #004085;
  --primary-color-disabled: #b8daff;
  --text-color-disabled: #6c757d;
}

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

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

通过JavaScript切换类名，可以实现主题的切换：

document.querySelector('#theme-toggle').addEventListener('click', function() {
  document.body.classList.toggle('dark-theme');
});

3.2 响应式设计

CSS变量可以用于响应式设计，使得在不同屏幕尺寸下使用不同的样式。这样可以更灵活地调整布局和样式。具体案例可以参考2.4

3.3 代码复用

CSS变量使得样式代码更具复用性，可以减少重复代码，提高代码的可维护性。通过定义全局变量，可以在整个项目中使用相同的样式值，方便管理和修改。

:root {
  --main-padding: 10px;
  --main-margin: 20px;
}

.header, .footer, .main-content {
  padding: var(--main-padding);
  margin: var(--main-margin);
}

这样，如果需要修改全局的间距，只需要修改一次变量定义，所有引用该变量的地方都会自动更新。

3.4 创建可配置的组件

CSS变量可以用于创建高度可配置的组件，开发者或用户可以通过修改变量值来调整组件的外观和行为，而无需修改组件的具体实现。

:root {
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
}

.button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
}

通过修改变量的值，可以快速调整按钮的颜色，而无需修改按钮的具体样式代码。

3.5 动态主题与用户偏好

CSS变量可以根据用户的系统设置或偏好，动态调整网站主题。例如，自动切换到用户系统的暗色模式。

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #333333;
    --text-color: #ffffff;
  }
}

通过检测用户的系统设置，可以自动应用相应的样式，提供更好的用户体验。

3.6 实现渐变和动画

CSS变量也可以用于定义渐变颜色和动画关键帧，使得动画效果更加灵活和易于调整。

:root {
  --start-color: #ff7f50;
  --end-color: #1e90ff;
}

.gradient-background {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
}

@keyframes example {
  from {background-color: var(--start-color);}
  to {background-color: var(--end-color);}
}

通过修改变量的值，可以轻松调整渐变和动画的颜色。

3.7 计算公式中的使用

calc()函数在CSS中用于执行数值计算，它可以处理加法、减法、乘法和除法等操作。同样的在计算公式中我们也可以使用变量。

假设你已经定义了两个CSS变量，一个用于宽度，另一个用于高度，你可以使用calc()来计算元素的边距或大小。

:root {
  --width: 100px;
  --height: 50px;
  --padding: 10px;
}

.element {
  width: calc(var(--width) + var(--padding) * 2); /* 宽度加上左右内边距 */
  height: var(--height);
  margin: calc(var(--padding) * 2); /* 上下外边距为内边距的两倍 */
}

如果变量不存在，calc()函数可以结合var()函数的默认值参数来提供一个备选值。

.element {
  margin: calc(var(--margin, 20px) * 2); /* 如果--margin不存在，使用20px */
}

使用calc()也可以进行更复杂的计算，比如同时使用加法和乘法。

:root {
  --base: 8px;
}

.element {
  font-size: calc(16px + var(--base) * 2); /* 字体大小加上基础值的两倍 */
  padding: calc(5% + var(--base)); /* 内边距为5%加上基础值 */
}

使用calc()函数时，重要的是要注意操作符的使用和计算的顺序。CSS计算是按照数学中的运算顺序执行的，类似于中缀表达式。如果需要改变计算顺序，可以使用括号来明确指定。

这些场景展示了CSS变量在提高样式代码的灵活性和可维护性方面的巨大潜力。通过合理使用CSS变量，可以大幅提升Web开发的效率和用户体验。

四、兼容性

可以使用在线工具如Can I Use来查看CSS变量在具体移动浏览器版本中的支持情况。

PC浏览器支持情况

以下是一些主要浏览器对CSS变量的支持情况：

  • Google Chrome: 从版本 49 开始支持。
  • Mozilla Firefox: 从版本 31 开始支持。
  • Microsoft Edge: 从版本 15 开始支持。
  • Safari: 从版本 9.1 开始支持。
  • Opera: 从版本 36 开始支持。

不支持的浏览器

  • Internet Explorer: 不支持CSS变量

移动端浏览器的支持情况

以下是一些主要移动端浏览器对CSS变量的支持情况：

  • iOS Safari: 从版本 9.3 开始支持。
  • Android Chrome: 从版本 49 开始支持。
  • Samsung Internet: 从版本 5.0 开始支持。
  • Opera Mobile: 从版本 37 开始支持。
  • Firefox for Android: 从版本 48 开始支持。

使用JavaScript检测浏览器是否支持CSS变量，然后根据结果应用相应的样式。

if (window.CSS && CSS.supports('(--a: 0)')) {
  console.log('CSS Variables are supported');
} else {
  console.log('CSS Variables are NOT supported');
  // 应用备用样式
}

对于不兼容的浏览器也可以使用PostCSS插件（如postcss-custom-properties）在构建过程中将CSS变量转换为普通的CSS属性，从而实现对旧版浏览器的兼容性支持。

五、不足

从前面我们可以了解CSS变量的强大之处，那使用的时候有什么注意事项呢？

  1. 集中声明：将所有全局CSS变量放在:root伪类中，这样可以确保它们在整个文档中都可用。
  2. 命名规范：使用一致的命名约定，如BEM（Block Element Modifier）或CSS Modules，以提高变量名的可读性和可预测性。
  3. 分组相关变量：将相关的变量组合在一起，例如，所有的颜色变量放在一个部分，所有的尺寸变量放在另一个部分。
  4. 使用注释：在变量声明旁边添加注释，说明每个变量的用途和可能的值范围。
  5. 避免过度使用：不要过度依赖CSS变量。如果某个值在整个样式表中只使用一次，那么将其硬编码可能更简单、更清晰。
  6. 限制作用域：尽可能使用局部变量，只在需要的地方声明和使用它们，以避免全局污染。
  7. 默认值：在使用var()函数时，总是提供一个默认值，这样即使变量未定义，样式也不会中断。

结语

以上就是关于CSS变量的全部内容。正如任何强大的工具一样，合理使用CSS变量需要对它们的工作方式有深刻的理解。开发者应该遵循最佳实践，如使用有意义的变量名、限制变量的作用域、提供后备值等，以确保样式的健壮性和兼容性。

avatar
文章
阅读
粉丝