CSS变量(css variable)
来源:互联网 发布:崔恺 知乎 编辑:程序博客网 时间:2024/05/17 08:58
不知道大家有没有用过less和sass,我是在用webpack和gulp做的几次项目做用过几次
用过的同学都知道less和sass写样式可以按照层级写
非常方便,标签关系一眼看穿
其中sass和less还有一个规定变量的功能,大家定义常用的样式作为一个变量需要用的时候直接用就行了
不需要重复写,非常方便
所以我一直以为只有less和sass里才能设置变量
但是今天在看项目代码的时候发现css现在已经支持变量了
很是有趣,于是便了解了一下
贴代码
:root{ --width: 100px; --height: 50px; --background: red;}
这样我们就定义一些样式的代码,怎么定义呢?
就是在你需要重复使用的样式,给它一个变量名,然后再前面加- -
然后在写上对应的样式就可以了
顺便介绍一下:root
这表示根标签,在HTML里面就是表示<\html>了
然后怎么用呢
div{ width: var(--width); height: var(--height); background: var(--background); }
就像上面一样,使用var(变量名)就可以了
这样,大家在定义样式的时候用到重复的变量就有解决方案了
对了,还有一个问题,大家有没有注意到为什么我是在根标签上定义的变量
我是这样理解的
大家都知道变量提升和访问限制吧
全局的作用域不能访问函数作用域的变量,但是反向却可以
所以我在根标签定义变量,也想到与定义了一个全局变量,都能用
因此,我们在定义变量的时候也需要考虑到该元素的层级,子元素是能引用,可能父元素并不能应用你在子元素定义的变量
大家用的时候得注意一下,尽量选择更高的层级
阅读全文
0 0
- CSS变量(css variable)
- CSS变量variable
- CSS变量variable
- 腾讯ISUX: 面向未来的 CSS Variable (CSS变量)
- CSS自定义属性(CSS变量)
- CSS 变量
- css 变量
- CSS变量
- css 冷知识 css变量
- bash变量(variable)
- PowerShell 变量(Variable)
- js定义css变量
- 本机CSS变量
- CSS变量初体验
- CSS变量试玩儿
- css 使用变量
- css变量使用
- CSS 变量教程
- Sass
- 17.Scala中包、类、对象、成员、伴生类、伴生对象访问权限实战彻底详解
- HDU5816(状压DP,位运算的一些技巧)
- 状态模式
- 【HttpClient4.5中文教程】【第一章 :基础】1.3 HttpClient执行上下文
- CSS变量(css variable)
- react-router 路由匹配
- 51nod 1405 树的距离和
- 阿里巴巴在线测试题
- Cow Sorting POJ
- [LeetCode] 20. Valid Parentheses
- c语言数组和指针
- 浅淡 vue-cli
- 简单回合制小游戏