CSS自定义属性(CSS变量)

时间:2019-01-22
本文章向大家介绍CSS自定义属性(CSS变量),主要包括CSS自定义属性(CSS变量)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

CSS中引入变量的用途:

  1. 为风格统一而使用颜色变量。
  2. 一致的组件属性(布局,定位等)。
  3. 避免代码冗余。
    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变量的复杂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');
}