CSS自定义属性（CSS变量）

CSS中引入变量的用途：

为风格统一而使用颜色变量。
一致的组件属性（布局，定位等）。
避免代码冗余。
CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力，可以非常高效的读取、设置和更新这些变量！

变量，是标识符和可以用任何常规值替代值之间的关联，使用 var() 函数表示法：var(- example-variable) 返回 --example-variable 的值。

自定义属性，这是表单的特殊属性 --name 这里 name 表示变量名称。这些用于定义给定变量的值：–example-variable：20px; 是一个 CSS 声明，使用自定义 --*属性将CSS变量–example-variable的值设置为20px。

定义一个变量：
使用 :root 作用域来定义全局变量：
用这样的方式来声明一个变量：–variable-name: variable-value;（变量名是大小写敏感的）。变量的值可以是颜色、字符串、多个值的组合等。

:root {
	--main-color: #4d4e53;
	--main-bg: rgb(255, 255, 255);
	--logo-border-color: rebeccapurple;
	--header-height: 68px;
	--content-padding: 10px 20px;
	--base-line-height: 1.428571429;
	--transition-duration: .35s;
	--external-link: "external link";
	--margin-top: calc(2vh + 20px);
}

用法：
以这样的方式来使用一个变量: some-css-value: var(–variable-name [, declaration-value]);

p {
	margin: var(--p-margin, 0 0 10px);
}

变量组合
变量可以和其他变量组合使用，–variable-name: var(–another-variable-name)；

.block {
	--block-text: 'This is my block';
	--block-highlight-text: var(--block-text)' with highlight';
}

.block:before {
	content: var(--block-text);
}

.block__highlight:before {
	content: var(--block-highlight-text);
}

值的计算（calc()）

:root {
	--font-size: 20px;
	--base-line-height: 1.428571429;
}
body {
	font-size: var(--font-size);
}
p {
	margin: 0 0 calc(var(--base-line-height, 0) * 1rem);
}

浏览器支持 CSS自定义属性（CSS变量）
存在一些限制
在一些浏览器中，针对CSS变量的复杂calc()运算可能不能工作。
在当前作用域下的所有自定义属性上应有公共规则（如，reset）的功能在讨论中。就像这样：–: initial;
不能使用CSS自定义属性作为CSS属性名称：var(–side): 10px;
进行calc()运算时，最好能提供默认值: calc(var(–base-line-height, 0) * 1rem)
不能作为媒体查询值使用：@media screen and (min-width: var(–desktop-breakpoint) {
图片地址，如url(var(–image-url)) ，不会生效

检测浏览器是否支持CSS自定义属性的方法
css：

@supports ((--a: 0)) {
	/* supported */
}

@supports (not (--a: 0)) {
	/* not supported */
}

js：

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
	alert('CSS properties are supported');
} else {
	alert('CSS properties are NOT supported');
}

CSS自定义属性（CSS变量）

相关推荐