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
|
|||
|
|
|