111 lines
2.2 KiB
Markdown
111 lines
2.2 KiB
Markdown
---
|
||
title: CSS自定义属性（变量）
|
||
date: 2021-01-11
|
||
author: ac
|
||
tags:
|
||
- CSS
|
||
categories:
|
||
- Web
|
||
---
|
||
|
||
> 复杂的网站中都会有大量的CSS代码，通常也会有许多重复的值。我们可以将这些重复的值使用自定义属性（变量）来表示，作为公共的CSS代码，然后再其他地方引用，这样更易于维护。
|
||
|
||
<!-- more -->
|
||
|
||
## CSS中的变量
|
||
|
||
### 1. 基本使用
|
||
|
||
变量的声明，语法：`--variableName`;
|
||
|
||
变量的使用，语法：`var(--variableName,defaultValue)`。
|
||
|
||
`variableName`：表示变量的名称，可以是数字字母下划线短横线`[0-9a-zA-Z_-]`进行组合。注意，大小写敏感。
|
||
|
||
`defaultValue`：表示默认值。当给定的变量值是未定义或无效不合法时，将会使用默认值。
|
||
|
||
```css
|
||
body{
|
||
--main-bg-color: #42b983
|
||
--text-color: #da5961
|
||
}
|
||
div{
|
||
background: var(--main-bg-colors,blue)
|
||
}
|
||
```
|
||
|
||
> 规则集所制定的选择器定义了自定义属性的可见作用域，即变量的作用域就是它所在的选择器的有效范围。
|
||
|
||
可以通过在 [`:root`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root) 伪类上设置自定义属性，然后在整个文档需要的地方使用。
|
||
|
||
```css
|
||
/* 全局变量 */
|
||
:root{
|
||
--main-bg-color: #42b983;
|
||
}
|
||
/* 局部变量 */
|
||
div{
|
||
background: var(--main-bg-colors,blue)
|
||
}
|
||
```
|
||
|
||
|
||
|
||
### 2. 变量类型
|
||
|
||
**字符串**
|
||
|
||
可以与其他字符串拼接。
|
||
|
||
```css
|
||
--eq: 'learning';
|
||
--cd: var(--eq)' css';
|
||
```
|
||
|
||
**数值型**
|
||
|
||
数值不能与单位写在一起。
|
||
|
||
```css
|
||
.div{
|
||
--mit: 20;
|
||
/*无效*/
|
||
margin-top: var(--mit)px;
|
||
}
|
||
```
|
||
|
||
解决方法：
|
||
|
||
```css
|
||
/* 方式一：变量值带有单位，不能写成字符串*/
|
||
.div{
|
||
--mit: 20px;
|
||
margin-top: var(--mit);
|
||
}
|
||
/* 方式二：使用calc()函数*/
|
||
.div{
|
||
--mit:20;
|
||
margin-top: calc(var(--mit)*1px);
|
||
}
|
||
```
|
||
|
||
|
||
|
||
### 3. JS中的值
|
||
|
||
在JavaScript中获取或者修改CSS变量和操作普通CSS属性是一样的：
|
||
|
||
```javascript
|
||
element.style.getPropertyValue("--mit");
|
||
element.style.setProperty("--mit",newVaule);
|
||
```
|
||
|
||
|
||
|
||
## 参考文章
|
||
|
||
[1] `使用CSS自定义属性(变量)` https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
|
||
|
||
[2] `CSS 变量教程` http://www.ruanyifeng.com/blog/2017/05/css-variables.html
|
||
|