css - 原生变量及使用函数 var()
零.序言
前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章之后才知道这是 css 变量,不禁感叹自从 V8 引擎之后花样越来越多。经过翻查总结(也没啥总结的,翻过文档之后挺简单的),记录如下:
一、基本用法
变量声明:
变量声明的时候,变量名之前加上两根连词线(--)即可。例如:
1 2 3 4 | body { --foo: #7F583F ; --bar: #F7EFD2 ; } |
大小写敏感、变量名等这些参考 js 变量名规则肯定不会错,而变量名中存储的值的书写规则仍然采用 css 的规则,如: --x: 20px 30px 而不是 --x: '20px 30px' 。
变量使用:var() 函数
var() 函数是用来读取变量,如下例:
1 2 3 4 5 6 | a { --foo: #f1f2f5 ; --bar: red ; color : var(--foo); text-decoration- color : var(--bar); } |
var() 函数有第二个参数,表示变量的默认值,如果该变量不存在(第一个参数),那么就使用这个默认值。并且,第一个参数后面的全部算第二个参数,不管有多少个逗号,比如:
1 2 | var(--font-stack, "Roboto" , "Helvetica" ); var(--pad, 10px 15px 20px ); |
另外, var() 函数也可作为其他变量的值,但也仅作为其他变量的值使用:
1 2 3 4 5 6 7 | :root { --primary- color : red ; --logo-text: var(--primary-color); /* 无效 */ var(--primary-color): green ; } |
作用域:
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”(cascade)规则是一致的。
1 2 3 4 5 6 7 8 9 | <style> :root { -- color : blue ; } // 这个选择器等价于 html {} div { -- color : green ; } #alert { -- color : red ; } * { color : var(--color); } </style> <p>猜我的颜色是什么</p> // blue <div>猜我的颜色是什么</div> // green <div id= "alert" >猜我的颜色是什么</div> // red |
二、能帮助我们干什么?
我个人的感觉就像是一个先行性方案,潜力很大,能用的地方很多,轮子慢慢造,目前我碰到的用处有:
- 方便维护;(这样说感觉很笼统)
- 响应式布局;(稍微减少了点代码量)
- 配合 calc() 函数,完成计算;
- ...
三、js 的支持
js 中对于 css 的变量操作如下:
1 2 3 4 5 6 7 | // 设置变量 document.body.style.setProperty( '--primary' , ' #7F583F ’); // 读取变量 document.body.style.getPropertyValue( '--primary' ).trim(); // '#7F583F' // 删除变量 document.body.style.removeProperty( '--primary' ); |
如下例:
1 2 3 4 5 6 | const docStyle = document.documentElement.style; document.addEventListener( 'mousemove' , (e) => { docStyle.setProperty( '--mouse-x' , e.clientX); docStyle.setProperty( '--mouse-y' , e.clientY); }); |
四、其他
css 变量提供了 css 与 js 通信的一个新的渠道,自由性相应变广了。
只是就目前来讲,我们需要注意各大浏览器的兼容性,摊手。
分类:
css
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战