CSS变量（自定义属性）的基本使用-白红宇

CSS变量（自定义属性）的基本使用

阅读量：281 次

发布时间：2019-03-01

本文共 2012 字，大约阅读时间需要 6 分钟。

前言

CSS自定义属性的引入为开发者提供了一种更高效的方式来管理CSS值。通过定义一个自定义属性名（例如`--main-text-color`），我们可以在多处引用这个值，而不必每次都手动更新。这种方法不仅提高了维护效率，还增强了代码的可读性。特别是在颜色值涉及多处使用时，自定义属性能显著降低错误率。

在CSS自定义属性之前，CSS变量主要在预处理器如Less和SCSS中使用。然而，随着CSS的不断发展，自定义属性已经成为标准的CSS特性，能够在无需预处理器的支持下直接使用。

一、变量的声明和使用

CSS变量的声明和使用规则有几个关键点需要注意。

变量名的大小写敏感性

变量名必须遵循CSS的命名规则，且大小写敏感。例如，--color与--Color是不同的变量。

变量值的类型

变量值可以是任何有效的CSS值，包括字符串、颜色值、数值等。

对于颜色值，可以直接赋值，如：--primary-color: #ff6b6b;

对于数值，可以直接赋值，如：--gap: 20px;

变量的使用方式

使用变量时，可以通过var()函数引用。例如：

.container {     background-color: var(--primary-color); }```

变量的组合使用

当需要将多个变量拼接使用时，可以直接在CSS中进行操作。

对于字符串值，可以直接拼接：

:root {     --screen-category: 'category'; }  .content {     content: '--screen-category: ' + var(--screen-category); }```

对于数值值，通常需要通过calc()函数计算。例如：

.foo {     --gap: 20;     margin-top: calc(var(--gap) * 1px); }```

变量的默认值

在定义变量时，可以为未定义变量设置默认值。例如：

body {     background-color: var(--color, #cd0000); }```如果`--color`未定义，则默认使用`#cd0000`。

二、继承和作用域

CSS变量的作用域和继承规则与普通CSS属性类似。

作用域

全局变量可以通过:root定义。例如：

:root {     --color: red; }  body {     background-color: var(--color); }```

局部变量可以通过某个选择器定义。例如：

.box {     --1: #369; }  body {     background-color: var(--1, #cd0000); }```这里的`--1`只在`.box`作用域内有效。

继承

如果子元素未定义某个变量，则会继承父元素的变量值。例如：
```
.wrapper {     --color: red; }  .content1 {     --color: yellow; }  .content2 { }
```
在上述代码中，.content2没有定义--color，因此其颜色会继承.wrapper的red。

三、JS操作CSS变量

通过JavaScript可以对CSS变量进行读写。以下是一个示例：

// 读取变量值  const root = document.documentElement;  const color = root.getPropertyValue('--color').trim();  // 修改变量值  root.style.setProperty('--color', 'yellow');  color = root.getPropertyValue('--color').trim();  // 删除变量  root.style.removeProperty('--color');  color = root.getPropertyValue('--color').trim();

四、与预处理器(Sass, Less)比较

虽然CSS自定义属性和预处理器都支持变量，但两者的特性有显著不同。

CSS变量

动态性：可以在运行时动态修改。

可组合：支持字符串拼接和数学运算。

可继承：变量可以在子元素间继承。

预处理器

预处理器变量是静态的，无法在运行时修改。

缺乏作用域概念：预处理器变量通常是全局的。

五、常用场景

CSS变量适用于以下场景： 1. **颜色值统一管理**：确保所有组件使用一致的颜色。 2. **组件属性一致性**：如布局、定位等属性的统一管理。 3. **响应式布局和动画**：减少重复代码，提高代码可维护性。

通过合理使用CSS自定义属性，可以显著提升开发效率，同时降低维护成本。

转载地址：http://hjca.baihongyu.com/

你可能感兴趣的文章

Plotly-Dash:如何过滤具有多个数据框列的仪表板?