📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • css变量
  • 声明css变量
  • 使用css变量
  • css变量的作用
  • 操作css变量
  • 参考
在GitHub上编辑
  1. 杂项
  2. CSS

css变量

css变量

声明css变量

声明一个css变量和声明一个css属性一样,只不过约定css变量名必须是以--开头。

:root{
  --main-color: #ffffff;
  --main-bg: rgb(0, 0, 0);
}

css变量具有作用域的概念,同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中,三个选择器都声明了--color变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。

css变量对大小写敏感,--blue和--Blue是两个不同的变量

使用css变量

var()用于读取变量,它接收两个参数,第一个参数是要读取的变量名,第二个参数是默认值,当变量未定义时使用默认值。

color: var(--foo, #333);

第二个参数可以出现逗号或空格,这些都被视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--padding-trb, 10px 5px 8px);

当浏览器遇到无效的css变量时,会使用默认值或继承值。

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
  1. 检查属性 color 是否为继承属性。是,但是 <p> 没有任何父元素定义了 color 属性。转到下一步。

  2. 将该值设置为它的默认初始值,比如 black。

css变量的作用

css变量适用范围非常广,下面讨论一下一些非常有用的场景。

多主题

css变量可以制作多主题网站,比如网站的暗黑模式,我们将各组件的颜色存放到css变量中,如果要改变网站主题颜色只要改动css变量值就可以了。

--bodyColor: #fff;
--bodyFontColor: #000;
/* 暗色模式 */
--bodyColor: #000;
--bodyFontColor: #fff;

通过动态的修改css变量,可以很方便地修改网站主题。

知名的跨平台移动app开发框架——Ionic就是采取这种方式实现。下面是Ionic官网文档的原话和翻译。

Ionic组件是通过css变量构建的,这使应用程序的定制变得简单。css变量允许在一个地方存储一个值,然后在其他多个地方引用。这也使得动态改变css变为可能(在过去需要借助css预处理器),css变量让覆盖Ionic组件以匹配品牌或主题变得比以往更容易。

可见css变量最重要的是可以在不使用css预处理器的前提下动态地修改css。

响应式

这个网站定义了很多css变量,并且网站的很多组件都由这些变量来控制,那么这时只要改变了这些css变量就能达到改变css的目的。

看css变量--icon-box-width,当我们拉动缩小窗口时,这个值也会跟着缩小,从而使组件也跟着缩小。

操作css变量

媒体查询

可以借助媒体查询达到修改css变量的目的。

body {
    --primary: #7f583f;
}
@media screen and (min-width: 768px) {
    body {
        --primary: #f7efd2;
    }
}
body {
    background-color: var(--primary);
}

JavaScript操作css变量

可以通过JavaScript读取、设置和修改css变量

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

参考

上一页css选择器

最后更新于3年前

浏览器将 --text-color 的值替换给了 var(--text-color),但是 16px 并不是 的合法属性值。代换之后,该属性不会产生任何作用。浏览器会执行如下两个步骤:

Ionic components are built with for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.

css变量可以实现响应式布局,我们看一下这个网站

image-20211230225528320
image-20211230225602438
image-20211230225015266
image-20211230225032144

color
CSS Variables
Infinity 主页 (inftab.com)
CSS 变量教程 - 阮一峰的网络日志 (ruanyifeng.com)
使用CSS自定义属性(变量) - CSS(层叠样式表) | MDN (mozilla.org)
Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps (ionicframework.com)