css中也可以使用变量了?
2023-09-27 14:22:17 时间
前言
大家都听说过变量,我们学习的任何语言都有变量的存在。
css中是否也存在变量呢?
也许很多小伙伴也是通过less,scss中来使用css变量
其实在css中也是有变量的,今天我们也来学习一下。
为什么要使用变量
变量有一个很大的作用就是降低维护成本。
不仅如此,还可以提高我们的开发效率。
实现改一个,而改全部。是不是爽歪歪。
使用变量的优势:
假如我们确定了项目的主题色,
然后在各个 CSS 代码中使用该了主题色,
如果后期主题色变了,那岂不是所有 CSS 代码都得更改一遍。
这样的话累死我们呀!
假如我们用变量将该主题色存储起来,
后续 CSS 代码中直接使用变量即可,
需要更改主题色时,直接更改变量值即可。
自定义属性[css变量]的简单介绍
自定义属性(有时候也被称作 CSS 变量或者级联变量)是由 CSS 作者定义的。
它包含的值可以在整个文档中重复使用。
css的自定义属性[css变量]是有要求的,需要以--开头。
声明变量: --main-color: black; // css变量的自定义属性是有要求的需要以--开头。
由 var() 函数来获取值比如:color: var(--main-color);
变量的使用
<head>
<style>
:root {
--bgColor: rgb(9, 246, 246);
}
div {
/* 上下面的代码等价于 background-color:rgb(9, 246, 246) */
background-color: var(--bgColor);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
对上面代码的分析 :root
上段代码中我们定义了一个 bgColor 变量,
需要注意的是我们需要在自定义属性前面加上--才算是变量,
这算是 CSS 变量的声明规则。
自定义属性值 rgb(9, 246, 246) 就是我们的变量值。
上面的:root 是一个伪类,它相当于一个全局作用域。
我们都知道变量是有作用域的概念的。
声明在:root 伪类中的变量可以在全局 CSS 代码中使用。
简单点说:如果要声明全局所有元素都能使用的话,可以设置到根伪类:root下:
:root {
--bgColor: rgb(9, 246, 246);
}
变量命名规则
不能包含 $,[,^,(,%等字符
普通字符局限在只要是 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-” 这些组合
可以是中文,日文或者韩文
变量值只能用作属性值,不能用作属性名,比如下方代码我们是不允许的:
特别需要注意的是【变量名】必须以 “--”开头哈
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
5.换肤原理
<head>
<style>
:root {
--theme: yellow;
}
.box {
width: 100px;
height: 100px;
background-color: var(--theme);
}
</style>
</head>
<body>
<div class="box" id="contShow"></div>
<button id="btn1">切换黑色主题</button>
<button id="btn2">切换黄色主题</button>
</body>
<script>
let box = document.getElementById('contShow')
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.addEventListener('click', () => {
box.style.setProperty('--theme', '#000');
})
btn2.addEventListener('click', () => {
box.style.setProperty('--theme', 'yellow');
})
</script>
发现问题
我们都知道,在实际的过程中不可能只会有这么一个颜色。
https://varlet.gitee.io/varlet-ui/#/zh-CN/row
可以参考一下这个换肤效果。如果有时间这周写一个简单的切换皮肤的demo效果
相关文章
- Scala系统学习(四):Scala变量
- MySQL的四种变量类型
- JAVA 基础语法——(HelloWorld案例编写,Notepad软件的安装和使用,注释,关键字,常量,变量,计算机存储单元,数据类型,标识符,类型转换)
- C++-指针:void*(不确定类型指针)简介【void *可以接受任何类型的赋值】【void *可以赋值给任何类型的变量】【void *不可以解引用】
- Python的私有变量和私有方法
- Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
- thinkphp 系统变量
- 匿名内部类及如何访问外部变量
- Shell 变量
- css变量系列(5):vue3在css中调用js变量
- css变量系列(4):js中使用sass的变量
- 初始化python类的实例时,私有变量的值与上一个实例的相同,问题定位
- Java基础:Java变量、数据类型、运算符(2)
- 浏览器原理 06 # 变量提升:JavaScript代码是按顺序执行的吗?
- python和shell之间相互交换变量获取变量
- Nginx 变量漫谈(二)