在CSS中，变量是一个强大的工具，可以帮助我们更有效地管理和复用样式。CSS变量（也称为CSS自定义属性）允许我们为特定的值定义名称，然后在整个样式表中重复使用这些名称。CSS变量以--开头，这使得它们很容易从常规属性中区分出来。本文将带你了解CSS-Var变量的定义、使用以及其在样式编写中的优势。
优势
使用CSS变量有以下几个优势：
- 可维护性：通过为特定的值定义名称，我们可以更容易地理解和修改这些值。当需要更改某个值时，我们只需要在定义变量的地方进行修改，而不需要在整个样式表中搜索和替换该值。
- 复用性：变量可以在整个样式表中重复使用，这有助于减少冗余代码并提高代码的可读性。
- 主题化：通过定义一组变量来表示一个主题，我们可以轻松地切换整个页面的主题。例如，我们可以定义一个
--dark-theme变量组来表示暗色主题，另一个--light-theme变量组来表示亮色主题，然后根据需要切换这些变量组。 - 响应式设计：我们可以根据视口大小或设备类型定义不同的变量值，以实现响应式设计。例如，我们可以定义一个
--font-size变量，并在不同的媒体查询中为其设置不同的值。
css变量的定义
css变量是通过--*语法定义的，其中*表示我们为变量定义的名称。例如，我们可以定义一个名为--main-color的变量，并为其设置一个颜色值：
:root {
--main-color: #ff0000;
}
在上面的代码中，:root伪类表示文档的根元素，即<html>元素。在:root中定义的变量是全局变量，可以在整个样式表中访问。当然，你也可以在其他选择器内部定义局部变量，这些变量只在其所在的选择器范围内有效。
变量的使用
要使用CSS变量，我们需要在属性值中使用var()函数。var()函数接受一个参数，即我们想要使用的变量的名称。例如，如果我们想要使用上面定义的--main-color变量来设置一个元素的背景颜色，我们可以这样做：
body {
background-color: var(--main-color);
}
在上面的代码中，var(--main-color)会被替换为#ff0000，即我们在:root中定义的--main-color变量的值。
此外，var()函数还允许我们提供一个备用值，以防变量未定义或无法解析。例如：
body {
background-color: var(--main-color, #000000);
}
在上面的代码中，如果--main-color变量未定义或无法解析，那么background-color的值将默认为#000000。
实战：实现主题切换
首先我们给不同主题设置不同颜色，定义一个sass文件，如下：
$default_title: red;
$blue_title: blue;
$green_title: green;
$red_title: red;
:export {
default_title: $default_title;
blue_title: $blue_title;
green_title: $green_title;
red_title: $red_title;
}
注意：
:export是使用了 css-loader 和 style-loader 处理的 CSS Modules，借此可以在 CSS 文件中使用:export语法来导出类名
其次定义一个专门管理主题切换的Mixins(Vue3或者React可以自行定义Hooks)：
import themes from './index.scss'
export default {
computed: {
themes() {
return themes
},
themeType() {
return localStorage.getItem('themeType') || 'default'
},
thColor() {
return type => `${themes[`${this.themeType}_${type}`]}`
}
}
}
我们可以打印一下获取的CSS模型数据长什么样子
这边设计的是把当前的主题存储在浏览器缓存中，也可以根据角色配置存储后端进行持久化主题配置(无感刷新)。
紧接着主界面代码：
<template>
<div>
<p
:style="{
'--title': thColor('title')
}"
>变色</p>
<button @click="handleClick">切换颜色</button>
</div>
</template>
<script>
import themes from './themes'
export default {
mixins: [themes],
methods: {
handleClick() {
localStorage.setItem('themeType', 'dark')
window.location.reload()
}
}
}
</script>
<style scoped>
p {
color: var(--title);
}
</style>
切换时加上window.location.reload()是为了强制更新当前主题，并且重新加载当前主题的配色。
总之，CSS变量是一个强大的工具，可以帮助我们更有效地管理和复用样式。通过掌握其定义和使用方法，我们可以编写出更可维护、更可读的CSS代码。
原文链接：https://juejin.cn/post/7356099456918208524 作者：大码猴
