说一说CSS中的变量
2022-04-28 09:12
2146 查看
大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!
原文链接 ==>http://sylblog.xin/archives/43
前言
大部分的编程语言,在语言出现的那一刻就支持变量。但是,CSS一开始就不支持原生变量。所以大家开始选择SCSS,LESS等兼容的 CSS 扩展语言。不过庆幸的是CSS目前也已经支持变量。
定义变量
在JS中变量可以这样生命:
var variable;
在CSS中,变量是以两个-开始的。
div { --divWidth: 100px}
变量作用域
全局作用域 :root
:root { --bk-color: red}
局部作用域
div { --divWidth: 100px}
不同作用域可以出现同样的变量
div { --divWidth: 100px}span { --divWidth: 100px}
变量名区分大小写
:root { --color: blue; --COLOR: red; }
使用变量
在SCSS中我们是这样定义并使用变量的:
$font-size: 20px div { font-size: $font-size}
在CSS中,提供了var()函数来使用变量, 上边的SCSS就可以转成这样
:root { --font-size: 16px} .div { font-size: var(--font-size)}
注意:请不要使用已有的属性名称作为变量值。也请不要使用var来做属性名称。 下面这个例子是错误的:
:root { --fontSize: font-size} .div { var(--fontSize): 16px}
可以继承
可以在@media中进行修改
可以在 HTML 的 style 属性中使用
<html lang="en" style="--color: red;"> .father { font-size: 100px; color: var(--color); } <div class="father" --style="">123123</div>
浏览器如何解析
先上CSS
:root { --color: blue; } div { --color: green; } #child2 { --color: red; } * { color: var(--color); }
使用上面的变量声明,以下元素的颜色是什么?
<p>我是p</p> <div>我是div1 <div id='child1'>我是div1的儿子</div> </div> <div id="child2"> 我是div2 <p>我是div2的儿子</p> </div>
第一段将是blue。选择器--color上没有设置直接定义p,因此它继承了值:root
第一个div将是green。这很清楚。
div { --color: green;}第一个div的p将是green,继承自div1.
该div用的child2将不会是绿色的。这将是red,
#child2 {--color: red;}第一个div的p将是red,继承自div2.
JS操作
修改:root的变量
document.body.style.setProperty('--color', '#7F583F'); document.body.style.getPropertyValue('--color').trim(); document.body.style.removeProperty('--color');
相关文章推荐
- CSS 变量让你轻松制作响应式网页
- CSS变量
- 有关Css自定义变量的介绍
- js变量没有块级作用域一说
- CSS中定义变量,并使用变量设置属性值
- css 变量与javascript结合
- JavaScript基础,JavaScript的作用,HTML/CSS/JS 的关系,JS 的组成,JavaScript注释,JavaScript输入输出语句, 变量的使用,数据类型
- 关于CSS中透明度、手势以及C语言中本地变量的问题
- 第七周问题总结——表格增删改,css变量,属性选择器,获取select选中的值
- css变量
- CSS 变量教程
- web前端开发,CSS/CSS3原生变量你真的了解吗?
- CSS变量
- CSS变量的那一点东西
- 妙用CSS变量,让你的CSS变得更心动
- 支持变量和数学函数的 CSS 预处理器
- CSS 变量让你轻松制作响应式网页
- css 使用变量
- css文件中的样式类被覆盖,js文件中的变量未定义问题问题
- 关于原生 css 变量的那些事儿