当前位置: 首页 > news >正文

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

转载于:https://blog.51cto.com/13128608/2166978

相关文章:

  • 宏观政策转向,消费金融行业能否送别“至暗时刻”?
  • vc code
  • FLIP-24+-+SQL+Client
  • 【转】【WPF】WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel
  • linux内核中链表代码分析---list.h头文件分析(二)【转】
  • 时间不对导致vSAN服务无法启动
  • C# WinForm 技巧十: winfrom 全屏自适应屏幕分辨率
  • Java 软件高级工程师笔试题
  • Flask 的馈赠
  • redis的GEO实战
  • 苹果cms v10安装教程
  • Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • CentOS7源码包编译安装php7.2完整版
  • PXE安装与配置
  • 【呆鸟译Py】2018年数据科学家报告
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • ES6系统学习----从Apollo Client看解构赋值
  • JavaScript DOM 10 - 滚动
  • LeetCode29.两数相除 JavaScript
  • nodejs实现webservice问题总结
  • react-native 安卓真机环境搭建
  • React的组件模式
  • SpringCloud集成分布式事务LCN (一)
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • vuex 学习笔记 01
  • 初识 webpack
  • 对超线程几个不同角度的解释
  • 诡异!React stopPropagation失灵
  • 机器学习中为什么要做归一化normalization
  • 经典排序算法及其 Java 实现
  • 小试R空间处理新库sf
  • 一、python与pycharm的安装
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (30)数组元素和与数字和的绝对差
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (Note)C++中的继承方式
  • (笔试题)分解质因式
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (万字长文)Spring的核心知识尽揽其中
  • (新)网络工程师考点串讲与真题详解
  • (转)iOS字体
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • ***通过什么方式***网吧
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • .NET的数据绑定
  • .NET上SQLite的连接
  • .NET中统一的存储过程调用方法(收藏)
  • /etc/fstab和/etc/mtab的区别