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

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

阅读量：281 次

发布时间：2019-03-01

本文共 2014 字，大约阅读时间需要 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/

你可能感兴趣的文章