CSS变量(自定义属性)实践指南

更新日期: 2018-08-30阅读: 2.6k标签: 变量

本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。

近年来,一些动态特性开始作为规范的一部分,出现在CSS语言中。CSS变量(CSS variables),或者用它的官方称谓,叫作自定义属性(custom properties),已经可用,并且有非常棒的浏览器支持,而CSS mixins也正在取得进展。

在本文,你将学会如何使用CSS变量,并把它集成到你的CSS开发流程中,让你的样式表更好维护,且减少重复。

让我们现在就开始吧!


什么是CSS变量?

如果你曾使用过某种编程语言,那么你已经很熟悉变量这个概念了。变量用于存储和更新你的程序所需要的值,以便使它运行。

例如,考虑下面的JavaScript代码

let number1 = 2;
let number2 = 3;
let total = number1 + number2;
console.log(total); // 5
number1 = 4;               
total = number1 + number2;
console.log(total); // 7


nubmer1和 number2是两个变量,分别存储着数字2和3。

total同样是变量,存储着number1与number2之和。在这里它的值就是5。你可以动态地修改变量里的值,并在程序中使用它们。在上面的代码中,我把number1的值更新为4,然后再进行求和。使用相同的变量,这个时候total里存储的值就是5,而不再是7了。

使用变量的妙处在于,它可以让你在一个地方存储值,并且让你在后面能以各种理由去更新它。在程序中,你不需要为不同的值再添加额外的字符表示:任何值的更新都发生在同一个地方。正如,在你定义的变量上

CSS在很大程度上是一种声明式的语言,而缺少动态能力。你也许会认为,让CSS拥有变量,几乎让上面的说法自相矛盾。如果前端开发仅仅是关于文字游戏,那可以这么说。幸运的是,Web的编程语言很像生活中的语言,它们会随着周围环境和实践需要而不断进化与适应。CSS也同样如此。

简单的说,变量已经成为CSS世界中激动人心的事实,并且你即将亲自看到,对于这个厉害的新技术,学习和使用起来都非常直观。


使用CSS变量有什么好处?

使用CSS变量的好处,跟在其他编程语言中使用变量的好处没什么大的区别。

规范是这样描述这一点的

使用CSS变量,给看似随机的值加上富有信息的名字,从而使得大文件更容易阅读和编辑,更少出错。因为,你只需要在自定义属性中改变一次值,所有应用了这个变量的地方都会自动跟着一起改变。W3C 规范

换句话说,通过给变量起一个对你来说在项目中有意义的名字,你能更容易的管理和维护你的代码。例如,当你为项目中的主色调设置一个变量名--primary-color,那么你后面再修改这个主色调时,只需要改动一处,而不需要在不同位置的多个CSS文件中去手动修改多次值。


CSS变量和预处理器中的变量有什么不同?

你可能已经在CSS预处理器中尝试过使用变量而带来的好处了,比如SassLess

预处理器让你能设置变量,以及在函数、循环、数学计算等等地方中使用它们。这是否意味着CSS变量已经无关紧要了呢?

那可未必,主要是因为,CSS变量与预处理器中的变量其实是不同的东西。

这些不同基于一个事实:CSS变量是浏览器中直接可用的CSS属性,而预处理中的变量是用于编译成常规的CSS代码,浏览器其实对它们一无所知。

这意味着,你可以在样式表中,在内联样式中,在SVG的标签中直接更新CSS变量,甚至可以在运行时用JavaScript直接修改它。而你是无法对预处理器中的变量做上面这些操作的。CSS变量开启了一个充满可能性的新世界大门。

不是说你必须要在两者间做出选择:没有什么东西限制你,你可以同时使用CSS变量和预处理变量,并享有它们各自带来的巨大好处。


CSS变量:语法

虽然本文为了简洁,我使用了CSS变量(CSS variables)这个称呼,但官方的规范把它们称作作为级联变量的CSS自定义属性(CSS custom properties for cascading variables)。*CSS自定义属性(CSS custom property)*的部分看起来像这样:

--my-cool-background: #73a4f4;


在自定义属性前添加双横线前缀,然后像给普通CSS设值一样,给自定义属性设值。在上面的代码中,我给一个叫做--my-cool-backgroud的自定义属性设置了一个颜色值。

而 级联变量(cascading variable) 的部分,由通过val()来使用你的自定义属性组成,开起来像这样:

var(--my-cool-background);


自定义属性作用于CSS选择器中,val()可被当成一个真正的CSS属性一样使用。

:root {
    --my-cool-background: #73a4f4;
}
 
/* CSS文件的其他部分 */
#foo {
    background-color: var(--my-cool-background);
}


上面的代码片段把--my-cool-background这个自定义属性的作用域定义在:root这个伪类中,这让该自定义属性能被全局访问到(即在<html>标签内部的任何地方)。然后,使用val()函数把ID为foo的容器的background-color设置为自定义属性的值,这时该容器就有了浅蓝的背景色。

这还没完。你可以用同样的浅蓝色,给多个HTML标签的多种可以设置颜色值的地方设值,比如设置它们的colorborder-color。方法很简单,就是通过var(--my-cool-background)拿到自定义属性的值,然后给合适的CSS属性设置上去。(当然,在事情变得复杂之前,我建议思考一下你的CSS变量命名规范):

p {
    color: var(--my-cool-background);
}

示例1代码,可点击查看

你还可以从通过利用CSS变量获得另一个CSS变量的值。例如:

--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));

上面的代码创建了一个--my-gradient变量,是一个渐变样式,它的值被设为--top-color的值和--bottom-color的值组合的结果。现在,你可以在任何时候修改你的渐变样式,仅仅是修改变量的值就可以了,而不再需要在样式表里满文件地去找用到这个渐变样式地方。

示例2代码

最后,你可以在CSS变量中加入一个或多个备用值(fallback value/s),例如:

var(--main-color, #333);

上面的代码中,#333是一个备用值。当自定义属性值无效或未指定(unset)时,如果这时也没有指定备用值,那么被继承的(inherited)属性值将会被使用。


CSS变量是区分大小写的

与普通CSS属性不同,CSS变量是区分大小写的。

例如,var(--foo)和var(--FOO)是在求两个不同的自定义属性值,分别是--foo和--FOO的。


CSS变量受级联关系影响

和普通CSS属性一样,CSS变量是可继承的。例如,我们定义了一个属性,值为blue:  

:root {
    --main-color: blue;
}


当你给任意在<html>标签里的元素指定--main-color变量时,它们都会继承到blue这个值。

当你在另一个元素里,为改自定义属性设置了一个新值时,那么所有该元素的子元素都会继承那个新值。例如:  

:root {
    --main-color: blue;
}
.alert {
    --main-color: red;
}
p {
    color: var(--main-color);
}
<--! HTML -->
<html>
  <head>
    <!-- head code here -->
  </head>
 
  <body>
    <div>
      <p>blue 的段落</p>
      <div class="alert">
        <p>red 的段落</p>
      </div>
    </div>
  </body>
</html>


在上面的标签中,第一个p段落会继承到全局的--main-color值,它是蓝色。

在div标签中拥有.alert类的段落会是红色,因为它的值继承自局部作用域里的--main-color。

示例3代码

知道目前这些规则差不多够了。让我们开始写代码吧!


如何在SVG中使用CSS变量

CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式,以及和呈现相关的属性。

举个例子,假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。你可以把CSS变量的作用域限定在父容器中,然后给变量设置想要的颜色,那么里面的图标就会继承父容器的颜色值。下面是相关代码:

/* inline SVG symbol for the icon */
<svg>
  <symbol id="close-icon" viewbox="0 0 200 200">
    <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" />
    <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text>
  </symbol>
</svg>
 
/* first instance of the icon */
<svg>
  <use xlink:href="#close-icon" />
</svg>


上面的代码使用了<symbol>标签,它让你创建一SVG图形的不可见的版本。然后再使用<use>标签生成一个可见的副本。这种方法可以让你根据自己的喜好创建任意多个自定义的图标,也就是通过它的ID(#close-icon)指向那个<symbol>。这比一遍又一遍地写重复的代码创建图形更加简便。如果你想提高这方便的技术,Massimo Cassandro在他的Build Your Own SVG Icons中提供了一个快速教程

注意到SVG symbol中,circle元素里的stroke属性和text元素里的fill属性:它们都使用了CSS变量,这里是--icon-color。它被定义在:rootCSS文件的选择器中,像这样:  

:root {
    --icon-color: black;
}


这是当前图标看起来的样子:


这时,如果你把同样的SVG图标放在不同的父容器中,并且在父容器上,给你的CSS变量设置各自的局部值,那么你就会得到不同颜色的图标,并且不用给你的样式表添加多余的规则。这很酷!

为了展示这一点,我们把同样的图标放在一个有.success类的div里:

<!-- html -->
<div >
    <svg>
        <use xlink:href="#close-icon" />
    </svg>
</div>


现在,让--icon-color变量局部化,即把它放在.success中,并设置一个green值。我们来看看发生的变化:

/* css */
.success {
    --icon-color: green;
}

这个图标的颜色就变成了绿色,来看看一个完整的示例吧: 示例4代码


如何在@keyframes中使用CSS变量

CSS变量可以在CSS动画中使用,即可用于常规HTML元素,也可以用于内联的SVG。只需要记得,你得知道让什么元素动,把它视为目标元素,然后创建对该目标元素的选择器,在选择器的作用范围中定义你的CSS变量,然后,使用val()获取这些变量,把它们设置到@keyframes代码块中。

例如,让SVG中.bubble类里面的<ellipse>元素动起来,你的CSS可能会看起来像这样:

.bubble {
  --direction-y: 30px;
  --transparency: 0;
  animation: bubbling 3s forwards infinite;
}
 
@keyframes bubbling {
  0% {
    transform: translatey(var(--direction-y));
    opacity: var(--transparency);
  }
  40% {
    opacity: calc(var(--transparency) + 0.2);
  }
  70% {
    opacity: calc(var(--transparency) + 0.1);
  }
  100% {
    opacity: var(--transparency);
  }
}


注意到这是如何借助CSS的calc(),并用var()函数进行计算的。它们增强了你代码的灵活性。

这个例子简洁的地方在于,利用CSS属性,你可以简单的修改相应选择器里变量值而调整动画,而不需要挨个去查找@keyframes里的属性了。

这里有个完整的例子供你体验:示例5代码。  


如何通过JavaScript操作CSS变量

另一个超级酷的事情就是,你可以直接通过JavaScript代码访问CSS变量。

假设在你的CSS文件中,有一个叫做--left-pos的变量,作用在.sidebar选择器中,值为100px:

.sidebar {
    --left-pos: 100px;
}


那么,通过JavaScript获取--left-pos值,会像下面这样:

// 缓存你即将操纵的元素
const sidebarElement = document.querySelector('.sidebar');
 
// 缓存sidebarElement的样式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
 
// 获取 --left-pos CSS变量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
 
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);


如果想通过JavaScript设置CSS变量的值,你可以像这样:

sidebarElement.style.setProperty('--left-pos', '200px');


上面的代码将sidebar元素中--left-pos变量的值设置为200px。

请看看CodePen中的如下示例,你可以交互式地点击侧边栏,修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。

示例6代码


CSS变量的浏览器支持

除了IE11(它不支持CSS变量),所有主流浏览器都对CSS变量有全面地支持。

对于不支持CSS变量的浏览器,一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的@supports代码块

section {
    color: gray;
}
 
@supports(--css: variables) {
    section {
        --my-color: blue;
        color: var(--my-color, 'blue');
    }
}

考虑到@supports在IE/Edge里也起作用,上面的方法是可行的。如果你在val()函数中使用了备用值,那么你的代码将更加可靠,它能在兼容性不好的浏览器中实现优雅降级。

对于上面的代码,在Chrome和其他支持CSS变量的浏览器中,<section>标签里的文本将是蓝色

IE11中,由于它不支持CSS变量,页面将显示灰色文本

可以查看在线的示例7

此方法的一个缺点是,如果你大量使用CSS变量,而那些不支持CSS变量的浏览器在你的项目中有很高的适配优先级,那么相应的代码会变得很复杂,对于维护来说,甚至是噩梦。

在这种情况下,你可以选择使用带有cssnext的PostCSS,它能让你在CSS代码中使用最新的特性,并且让原本不支持这些属性的浏览器,也能运行这些代码(有点像JavaScript转换器做的事情)。

备注:这里可下载本文所有示列代码


链接: https://www.fly63.com/article/detial/1040

css自定义变量_初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。

css变量_原生css 中变量的使用

原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。

理解var let const区别

JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的

一个例子,变量提升和函数提升就是这么简单!

引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。

CSS变量使用解析

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

let与var的区别,为什么要用let?

var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局

ES6-变量的解构赋值

解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。

JS中变量的存储

JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象

js 交换变量值的方法总汇

这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值

JavaScript 的共享传递和按值传递

我们可以说原始数据类型和引用数据类型的副本作为参数传递给函数。不同之处在于,在原始数据类型,它们只被它们的实际值引用。JS不允许我们获取他们的内存地址,不像在C与C++程序设计学习与实验系统

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!