css设置全局变量和局部变量

时间：2018-08-30 20:05:50 阅读：844 评论：0 收藏：0 [点我收藏+]

在我们使用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)
}
这样就完成调用了在作用域外是无法调用的！
是不是很简单啊!大家可以实际代码测试一下，在具体的开发中还是很有用的哦！

css设置全局变量和局部变量

标签：less 大致文件中元素操作 css 定义效率方法

原文地址：http://blog.51cto.com/13128608/2166978

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行