码迷,mamicode.com
首页 > Web开发 > 详细

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

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

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

在我们使用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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!