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

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

优势

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

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

相关推荐
前端小趴菜0544 分钟前
react状态管理库 - zustand
前端·react.js·前端框架
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
天天向上10243 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y4 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁4 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路4 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
Savior`L4 小时前
CSS知识复习4
前端·css
前端小盆友5 小时前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
react.js·chatgpt·express