在我们使用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设置全局变量和局部变量
原创wx5965e46d05bc4 ©著作权
©著作权归作者所有:来自51CTO博客作者wx5965e46d05bc4的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
[vue] 如何使用CSS自定义变量
【代码】[vue] 如何使用CSS自定义变量。
css vue.js javascript 自定义 CSS -
vue3.0 CSS中混入JS变量(vue3 css v-bind)
使用方式:<script> const color = ref();</script><style> color: v-bind(color);</style>
javascript css 前端 vue.js html