在我们使用 less 或者 sass 时常常会使用到局部变量和全局变量, 其实在我们使用 CSS 做开发时也可以定义全局变量和局部 变量来简化我们的开发效率, 很简单也很实用;
1. 设置全局变量
只需要在我们的根引用的 css 文件中声明就行, 具体代码如下:
:rout{--cssname : value}
这样就声明了一个变量名为 cssname, 值为 value 的变量, 此变量在整个网页作用域内可以调用, 具体调用方法如下:
- .css{
- color : var(--cssname);
- }
这样就完成调用了,
2. 设置局部变量
其实设置局部变量和全局变量的方式大致一致, 具体操作如下:
如果我们需要在一个 id 为 box 的容器内声明一个局部变量, 让其在整个 box 容器内都是可调用的, 我们可以如下操作:
- #box{
- --cssname : value;
- }
这样我们就声明了一个变量名为 cssname, 值为 value 的局部变量, 此变量的作用域仅限于在 #box 容器的任何子元素, 调用方法如下:
- #box .child{
- color : var(--cssname)
- }
这样就完成调用了在作用域外是无法调用的!
是不是很简单啊! 大家可以实际代码测试一下, 在具体的开发中还是很有用的哦!
来源: http://www.bubuko.com/infodetail-2748738.html