首页 专题 H5案例 前端导航 UI框架

必须了解的CSS变量(var)

阅读 4231 评论 0
看到文章标题《必须了解的CSS变量(var)》,你是不是感到很奇怪,CSS居然有变量(var)了?

你没看错,CSS真的有变量(var),而且兼容性还不赖:

使用过CSS预处理,比如Less的伙伴们相信对变量并不陌生了,Less是这样定义变量的:

@blue{

  color: blue;

}


.box{

  color: @blue;

}


而在CSS中,也早就有变量了,就是currentColor,它表示当前的文字颜色:

:root{

  color: red;

}

div{

  color: currentColor;

}

div.blue{

  color: blue;

}


<div class="blue">字体是蓝色的</div>

<div>字体是红色的</div>

从上面的代码运行结果来看,如果当前元素设置了文字的颜色(color)时,currentColor指的是当前文字的颜色,否则会继承其祖先元素中最靠近当前元素的设置了文字颜色的元素的颜色(color)。

闲话聊完了,现在真正进入今天的正题,来看看CSS中如何定义和使用原生变量。

1、定义和使用

1.1 变量定义

CSS中原生变量的定义语法:

--variableName: variableValue;

variableName表示自定义变量名,variableValue表示属性值。

变量名称(variable-name)的规范:
  • 以“--”双横杠开头,后面可以是数字[0-9]字母[a-zA-Z]、下划线_短横线-这些组合,甚至是中文也行,但不能包含$、[、^、(、%等字符
  • 大小写是敏感的
  • 定义只能在声明块{}里面

看下面的例子:

:root{

  --1: red; /*有效的*/

  --background-color: blue; /*有效的*/

  --font_size: 20px; /*有效的*/

  --宽度: 100px; /*有效的*/

  --$color: red; /*无效的*/

}

--color: red; /*无效的*/

当然,并不是只能在:root根元素(这里定义的变量是全局的)里定义,你可以在任意的HTML元素里(相当于局部变量,在其他地方不能用)定义:

div{

  --1: purple;

}


需要注意的是,当你定义多个同名的变量时,变量的覆盖规则会是由CSS选择器的权重来决定的。比如:

:root{ --color: green;}

.box{ --color: yellow;}

#box{ --color: orange;}

 *{ color: var(--color);}


<span>我是绿色,继承根元素</span>

<div class="box">我是黄色,通过类设置的</div>

<div id="box">

  我是橙色,通过ID设置的(权重最大)

</div>


1.2 变量使用

相信细心的伙伴们在上面的例子,已经发现变量如何使用。

语法:

cssPropertyName: var(--variableName [, declarationValue]);

var()会返回--variableName的值,declarationValue表示默认值,也就是当--variableName没有定义的时候,取declarationValue的值。

:root{

  --color-name: 20px;

}

div{

  --color: red;

  color: var(--color);

}

span{

  color: var(--color, yellow);

}

p{

  color: var(--color-name, green);

}


<div>我是红色,自己设置的</div>

<span>我是黄色的,由于没发现变量--color,因此取默认值</span>

<p>我是黑色,并不是绿色</p>

这里需要注意两点:
  • var()第二个参数不需要双引号单引号括起,括起无效(反正我的测试是这样的)。
  • var()的默认值起作用仅限于变量未定义,像上面例子中,--color-name等于20px,然后赋给color只会失效,而不会取默认值

当然,我们还可以结合强大的calc()来使用自定义变量:

div{

  --width: 20px;

  width: calc(100% - var(--width));

}

在浏览器上,我们还可以实时调试:



变量之间还可以相互传递,也就是相互赋值,类似JavaScript中的变量一样:

:root{

  --red: red;

  --color: var(--red);

}

div{

  color: var(--color);

}

<div>我是红色的</div>


使用限制:
  • CSS自定义属性变量是不能用作CSS属性名称的,比如:var(--color): red;
  • 不能用作背景地址,比如:url(var(--url))
  • 由于var()后面会默认跟随一个空格,因此在其后面加单位是无效的,比如:--size:20; font-size: var(--size)px会解析成font-size: 20 px;

2、检测浏览器是否支持
有两种方式检测浏览器是否支持自定义属性

  • 使用@supports方法

@supports ( (--size: 0)) {

  /* 支持 */

}

@supports ( not (--size: 0)) {

 /* 不支持 */

}


  • 使用JavaScript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {

  /* 支持 */

}else{

  /* 不支持 */

}


3、使用JavaScript操作原生属性变量

我们可以很方便的使用window.getComputedStyle方法来使读写自定义属性变量(对于window.getComputedStyle,在这里就不多讲,我默认你已经知道了)

获取:

var rootStyles = getComputedStyle(document.documentElement);

var value = rootStyles.getPropertyValue('--variableName');


// 获取某个元素中定义的属性变量

value = element.style.getPropertyValue('--variableName');

修改:

element.style.setProperty('--variableName', value);

document.documentElement.style.setProperty('--variableName', value);


实例:

div{

  color: var(--color);

}


<div>我是红色的,由JavaScript设置</div>


<script>

  document.documentElement.style.setProperty('--color', 'red');

</script>


相信通过这篇文章,你会对CSS自定义属性变量有一定的了解,当然,个人能力有限,如果你有更多的关于CSS var()的文章或看法,欢迎在下方评论告知。


参考文章:



关注”全栈技术杂货铺“

全栈技术杂货铺