CSS变量的基本用法

CSS变量的基本用法

目的

  • 了解 css 变量是什么
  • 了解变量用法以及兼容性如何处理
  • 了解如何实现网页的换肤

一、 css 变量是什么?兼容?用途?

1、 css?

CSS 是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息显示的方式。CSS 样式可以直接存储于 HTML 网页或者单独的样式单文件。

2、 css 变量?

变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。CSS 变量也被称为 CSS 自定义属性。其中包含要在整个文档中重复使用的特定值,使用自定义属性来设置变量名,通过 var()函数使用变量。

3、 兼容

4、 用途

主要用在有换肤功能的项目中。可减少样式代码的重复性。

二、 变量的声明

1、声明变量的时候,变量名前面要加两根横线(–)

1
2
3
4
:root {
--color: #ff0;
--background: #f00;
}

上面代码中,:root 选择器里面声明了两个变量:–color 和–background。
它们与 css 中正式属性没有什么不同,只是没有默认含义。所以 CSS 变量又叫做”CSS 自定义属性”。因为变量与自定义的 CSS 属性其实是一回事。
注意:变量名大小写敏感,–color 和–Color 是两个不同变量。CSS 变量并不支持 !important。

2、为什么用两根横线(–)?

因为$被 Sass 用掉了,@被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根横线了。

1
2
3
4
5
6
7
8
9
10
11
// sass
$myColor: red;
h1 {
  color: $myColor;
}

// less
@myColor: #5B83AD;
h1 {
color: @myColor;
}

3、:root 是什么?

:root 选择器匹配文档根元素。
在 HTML 中,根元素始终是 html 元素。
也就是说:root 表示的是根元素

三、 var()函数

语法:var( <自定义属性名> [, <默认值 ]? )

1、var()函数用于读取变量

1
2
3
4
.box {
background: var(--background);
color: var(--color);
}

2、var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在就会使用这个默认值

1
color: var(--color, #00f);

3、var()函数还可以用在变量的声明中

1
2
3
4
:root {
--color: #f00;
--color-word: var(--color);
}

4、注意,变量值只能用作属性值,不能用作属性名

1
2
3
4
5
.foo {
--top: margin-top;
/* 无效 */
var(--top): 20px;
}

四、 变量的类型

各种值都可以放入 CSS 变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{
--color: #ff0;
--background: rgb(255, 0, 0);
--background: linear-gradient(blue, pink);
--background: url(cyy.png);
--border-color: blue;

--padding: 50px 0;
--width: calc(100% - 10px);
--height: 200px;


--margin-top: 100;
--content: "伪元素在这里哦!";
}

1、 如果变量值是一个字符串,则可以与其他字符串拼接

1
2
3
4
5
6
:root {
--content: "伪元素在这里哦!";
}
.box::after {
content: var(--content)"我在后面呢";
}

2、 如果变量值带有单位,就不能写成字符串

1
2
3
4
5
6
7
8
9
10
11
/* 无效 */
.box {
--size: '20px';
font-size: var(--size);
}

/* 有效 */
.box {
--size: 20px;
font-size: var(--size);
}

3、 如果变量值是数值,则不能与数值单位直接连用。必须使用 calc()函数,将它们连接。也可以采用上面的方法,直接写 20px。(变量的空格尾随特性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 无效 */
.box {
--top: 20;
margin-top: var(--top)px; // 相等于20 px
}

/* 有效 */
.box {
--top: 20;
margin-top: calc(var(--top) * 1px);
}

/* 有效 */
.box {
--size: 20px;
font-size: var(--size);
}

4、 当变量值不合法时,则采用缺省值。(变量不合法的缺省特性)

1
2
3
4
5
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}

请问,此时的背景色是?
A. transparent B. 20px C. #369 D. #cd0000

答案:A
解释:
对于 CSS 变量,只要语法是正确的,就算变量里面的值是个乱七八糟的东西,也是会作为正常的声明解析,如果发现变量值是不合法的,则使用背景色的缺省值,也就是默认值代替。于是,上面 CSS 等同于:

1
2
3
4
5
body {
--color: 20px;
background-color: #369;
background-color: transparent;
}

默认值示例

  • background  默认值是  transparent
  • width  默认值是  auto
  • position  默认值是  static
  • opacity  默认值是  1
  • display  默认值是  inline

五、 变量的作用域

同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”规则是一致的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
:root {
--color: blue;
}
div {
--color: green;
}
.box {
--color: red;
}
p,
div {
color: var(--color);
font-size: 30px;
font-weight: bold;
text-align: center;
}
</style>

<p>蓝色</p>
<div>绿色</div>
<div class="box">红色</div>

上面代码中,三个选择器都声明了–color 变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。

这就是说,变量的作用域就是它所在的选择器的有效范围。
由于这个原因,全局的变量通常放在根元素:root 里面,确保任何选择器都可以读取它们。

1
2
3
:root {
--color: #06c;
}

总结:

  • 范围:在当前元素块作用域及其子元素块作用域下有效
  • 优先级别:内联样式 > ID 选择器 > 类选择器 > 标签选择器 等等

六、 js 操作变量

1、 设置变量值 setProperty(name,val),第一个值代表变量名,第二个值代表变量值

1
2
// 设置变量
document.body.style.setProperty("--color", "#f00");

2、 获取变量值 getPropertyValue(name)

1
2
// 读取变量
document.body.style.getPropertyValue("--color");

3、 计算样式 getComputedStyle()

什么是计算样式?
获取某个元素下用到的一组样式;
可以将此方法简单的理解为 document.getXXXXX,都是需要先获取到元素再设置具体的样式
在获取变量之前,如果没有在 js 中定义这个变量,是获取不到的,则需要用 getComputedStyle 获取 css 中计算的样式。

1
2
3
4
5
6
7
8
9
// css
:root {
--color: blue;
}

// js
var body = getComputedStyle(document.body);
var variableColor = body.getPropertyValue('--color');
console.log(variableColor); // blue

4、 删除变量 removeProperty()

1
2
// 删除变量
document.body.style.removeProperty("--color");

七、 处理 IE 兼容问题

1、 处理 ie 下不兼容的问题(推荐)

使用 css-vars-ponyfill 解决 ie 不兼容的问题。

1
2
3
4
5
// 首先引入插件的js
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>;

// 再调用插件的方法
cssVars({});

其他用法请参考官方网址:https://www.npmjs.com/package/css-vars-ponyfill

作者

刘燕

发布于

2020-12-05

更新于

2021-08-04

许可协议

CC BY-NC-SA 4.0

评论