一文带你看懂CSS-Var变量定义

在CSS中，变量是一个强大的工具，可以帮助我们更有效地管理和复用样式。CSS变量（也称为CSS自定义属性）允许我们为特定的值定义名称，然后在整个样式表中重复使用这些名称。CSS变量以--开头，这使得它们很容易从常规属性中区分出来。本文将带你了解CSS-Var变量的定义、使用以及其在样式编写中的优势。

优势

使用CSS变量有以下几个优势：

可维护性：通过为特定的值定义名称，我们可以更容易地理解和修改这些值。当需要更改某个值时，我们只需要在定义变量的地方进行修改，而不需要在整个样式表中搜索和替换该值。
复用性：变量可以在整个样式表中重复使用，这有助于减少冗余代码并提高代码的可读性。
主题化 ：通过定义一组变量来表示一个主题，我们可以轻松地切换整个页面的主题。例如，我们可以定义一个--dark-theme变量组来表示暗色主题，另一个--light-theme变量组来表示亮色主题，然后根据需要切换这些变量组。
响应式设计 ：我们可以根据视口大小或设备类型定义不同的变量值，以实现响应式设计。例如，我们可以定义一个--font-size变量，并在不同的媒体查询中为其设置不同的值。

css变量的定义

css变量是通过--*语法定义的，其中*表示我们为变量定义的名称。例如，我们可以定义一个名为--main-color的变量，并为其设置一个颜色值：

css 复制代码

:root {  
  --main-color: #ff0000;  
}

在上面的代码中，:root伪类表示文档的根元素，即<html>元素。在:root中定义的变量是全局变量，可以在整个样式表中访问。当然，你也可以在其他选择器内部定义局部变量，这些变量只在其所在的选择器范围内有效。

变量的使用

要使用CSS变量，我们需要在属性值中使用var()函数。var()函数接受一个参数，即我们想要使用的变量的名称。例如，如果我们想要使用上面定义的--main-color变量来设置一个元素的背景颜色，我们可以这样做：

css 复制代码

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

在上面的代码中，var(--main-color)会被替换为#ff0000，即我们在:root中定义的--main-color变量的值。

此外，var()函数还允许我们提供一个备用值，以防变量未定义或无法解析。例如：

css 复制代码

body {  
  background-color: var(--main-color, #000000);  
}

在上面的代码中，如果--main-color变量未定义或无法解析，那么background-color的值将默认为#000000。

实战：实现主题切换

首先我们给不同主题设置不同颜色，定义一个sass文件，如下：

bash 复制代码

$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)：

typescript 复制代码

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模型数据长什么样子

这边设计的是把当前的主题存储在浏览器缓存中，也可以根据角色配置存储后端进行持久化主题配置(无感刷新)。

紧接着主界面代码：

xml 复制代码

<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代码。