CSS中的变量使用详解

泡在网上的日子 / 文 发表于2015-06-06 13:40 次阅读 CSS变量

CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升防错能力。

示例

:root {
  --base-font-size: 16px;
  --link-color: #6495ed;
}

p {
  font-size: var( --base-font-size );
}

a {
  font-size: var( --base-font-size );
  color: var( --link-color );
}

基础

当使用CSS变量时,你应该了解的三个主要组成:

  • 自定义属性

  • var()函数

  • :root伪类

自定义属性

你已经知道了一些CSS的标准属性,如color,margin,widthfont-size
下面的示例使用了CSS的color属性:

body {
    color: #000000; /* The "color" CSS property */
}

自定义属性仅意味着我们(创建CSS文件的人)去定义属性的名字。
为了自定义一个属性名,我们需要用--作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性,可以这样做:

:root {
    --text-color: #000000; /* A custom property named "text-color" */
}

var()函数

为了应用自定义属性,需要利用var()函数,否则浏览器不知道他们代表什么。
如果想要在ph1h2中的样式中使用--text-color,可以这样使用var()函数:

:root {
    --text-color: #000000;
}
p {
    color: var( --text-color );
    font-size: 16px;
}
h1 {
    color: var( --text-color );
    font-size: 42px;
}
h2 {
    color: var( --text-color );
    font-size: 36px;
}

其等价于:

p {
    color: #000000;
    font-size: 16px;
}
h1 {
    color: #000000;
    font-size: 42px;
}
h2 {
    color: #000000;
    font-size: 36px;
}

:root伪类

我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性,但到处定义属性并不是一个好主意,这对CSS的可维护性和可阅读性是一个挑战。

:root 伪类代表了HTML文档的根元素,这是一个放置自定义属性的好位置,因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。

CSS变量的好处

可维护性

在一个Web开发项目中,我们经常重复使用一个特定的CSS属性值:

h1 {
    margin-bottom: 20px;
    font-size: 42px;
    line-height: 120%;
    color: gray;
}
p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 120%;
    color: gray;
}
img {
    margin-bottom: 20px;
    border: 1px solid gray;
}
.callout {
    margin-bottom: 20px;
    border: 3px solid gray;
    border-radius: 5px;
}

当需要改变某些属性值时,问题就会暴露出来了。
如果我们手动的改变属性值,尤其是当CSS文件很大时,不仅会花费大量时间,还可能会范一些错误。同样的,如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写:

:root {
    --base-bottom-margin: 20px;
    --base-line-height: 120%;
    --text-color: gray;
}
h1 {
    margin-bottom: var( --base-bottom-margin );
    font-size: 42px;
    line-height: var( --base-line-height );
    color: var( --text-color );
}
p {
    margin-bottom: var( --base-bottom-margin );
    font-size: 18px;
    line-height: var( --base-line-height );
    color: var( --text-color );
}
img {
    margin-bottom: var( --base-bottom-margin );
    border: 1px solid gray;
}
.callout {
    margin-bottom: var( --base-bottom-margin );
    border: 1px solid gray;
    border-radius: 5px;
    color: var( --text-color );
}

假设你现在的客户说由于文本颜色太亮,导致文本难以阅读,想要改变文本颜色,此时,我们只需要更新一行CSS规则:

 --text-color: black;

提高CSS的可读性

自定义属性会使样式表更加易读,也会使CSS属性声明更有语义。
将这个声明

background-color: yellow;

和下面的声明比较一下

background-color: var( --highlight-color );
font-size: var( --base-font-size );

yellow18px一类的属性值并没有给我们任何有用的上下文信息,但是当我们阅读如--base-font-size--highlight-color一样的属性名时,即便在其他人的代码,我们都能马上知道这个属性值是在做什么。

要注意的事

大小写敏感

自定义属性是大小写敏感的(和普通的CSS规则不一样)

:root {
    --main-bg-color: green;
    --MAIN-BG-COLOR: RED;
}
.box {
    background-color: var( --main-bg-color ); /* green background */
}
.circle {
    BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
    border-radius: 9999em;
}
.box,
.circle {
    height: 100px;
    width: 100px;
    margin-top: 25px;
    box-sizing: padding-box;
    padding-top: 40px;
    text-align: center;
}

自定义属性值的解析

当重复声明自定义属性时,其赋值遵循通常的CSS层叠和继承规则。例如下面的示例:
HTML

<body>
    <div class="container">
        <a href="">Link</a>
    </div>
</body>

CSS

:root {
    --highlight-color: yellow;
}
body {
    --highlight-color: green;
}
.container {
    --highlight-color: red;
}
a {
    color: var( --highlight-color );
}

当移除.container规则时,链接的颜色值将是green

回退值

当使用var()函数时,可以分配一个回退的属性值,其作为一个额外参数和第一个参数用,隔开。看下面的示例:
HTML

<div class="box">A Box</div>

CSS

div {
    --container-bg-color: black;
}
.box {
    width: 100px;
    height: 100px;
    padding-top: 40px;
    box-sizing: padding-box;
    background-color: var( --container-bf-color, red );
    color: white;
    text-align: center;
}

因为给var()传递了一个回退值参数,所以div的背景色最中被渲染成红色。

无效值

谨防给CSS属性分配错误类型的值。
在下面的示例中,由于自定义属性--small-button被赋予一个长度单位,它被用在.small-button样式中是无效的(译者注:因为color的属性类型值出错)

:root {
    --small-button: 200px;
}
.small-button {
    color: var(--small-button);
}

避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width

浏览器对CSS变量的支持

CSS变量用起来很方便,但是浏览器对其支持情况不太好:
var supported
或者戳此链接:var supported

本文根据@Jacob Gube的《Introduction to CSS Variables》所译,整个译文带有我自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://sixrevisions.com/css/variables/

收藏 赞 (2) 踩 (0)
上一篇:用CSS绘制三角形
引入 用 CSS 绘制三角形,只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下,就会发现其中的技巧。下面,我们先看以下代码: HTML代码:divclass=test/div----------CSS代码:.test{width:10px;height:10px;border-top:50pxsolidblack;b
下一篇:Flex 布局语法教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了