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'); }