CSS基础篇--CSS/CSS3中的原生变量var详解

时间 2020-02-17

标签 css 基础 css3 原生变量 var 详解栏目 CSS 繁體版

原文原文链接

使用语法

首先咱们先来看一个例子：
html代码：css

<div class="element">这是一段文字</div>

css代码：html

.element {
  width:200px;
  height:200px;
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

实现效果：
css3

结果是该DOM元素背景变成了黑色。浏览器

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示咱们的变量名称。关于命名这个东西，各类语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，可是，在CSS变量中，这些限制统统没有，例如：wordpress

:root{
    --main-bg-color: #000;
}
.element {
    background-color: var(--main-bg-color);
}

注意：变量名称不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，可是能够是中文，日文或者韩文，例如：函数

.element {
  width:200px;
  height:200px;
  --黑色: #000;
  color:#fff;
  background-color: var(--黑色);
}

css变量完整语法：
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )，也便是若是咱们没有定义变量名称，那么就会使用后面的值做为其默认属性值。
以下：工具

.element {
    background-color: var(--new-bg-color,#EE0000);
}

获得的结果固然是后面颜色的值的背景。网站

咱们来看一下若是变量名称不合法会出现什么结果，看下面例子：spa

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

请问，此时<body>的背景色是？3d

A. transparent
B. 20px
C. #369
D. #cd0000

答案是：A. transparent
CSS变量中，果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用背景色的缺省值，也就是默认值代替，因而，上面CSS等同于：

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

css变量在js中的应用

看以下例子，html代码：

<div id="jsDom">这是一段文字</div>

css代码：

#jsDom {
    --my-varwidth: 200px;
    background-color: #000;
    color:#fff;
    width:var(--my-varwidth);
    height:200px;
}

js代码：

var element = document.getElementById('jsDom');
var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px

//设置事后该DOM元素的宽度变为了300px
element.style.setProperty("--my-varwidth", '300px');

若是样式是写到行间呢？那么进行以下操做：
html代码：

<div id="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">这是一段文字</div>

js代码：

var element = document.getElementById('jsDom');
var curWidth = element.style.getPropertyValue("--my-varwidth");
console.log(curWidth); //400px

浏览器兼容

浏览器的兼容如图所示：

到目前位置IE11也不支持该css变量。

说到这儿感受这个css变量也是很强大的，那么它跟预处理器比较，你以为哪一个更好？下面讲一下预处理器的劣势。

预处理器劣势

预处理器变量不是实时的

也许令新手惊讶的是，预处理器局限性最多见的状况是Sass没法在媒体查询中定义变量或使用@extend。

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

上面代码将编译为：

.Container { 
     padding: 1em;
 }

上面结果能够看出来，媒体查询块被丢弃，变量赋值被忽略。

因为没法在匹配@media规则的基础上改变变量，因此惟一的选择是为每一个媒体查询分配一个惟一的变量，并单独编写每一个变体。

预处理器变量不能级联

每当使用变量，做用域的问题就不可避免的出现。这个变量应该设置为全局变量吗？是否应该限定其范围为文件或模块？是否应该限制在块中？

因为CSS最终目的是为HTML添加样式，事实证实还有另外一种有效的方法给变量限定做用域：DOM元素。但因为预处理器不在浏览器中运行而且没法看到标记，它们不能这样作。

假设有一个网站，面对偏好较大文字的用户，就向<html>元素添加类user-setting-large-text。当设置了这个类时，应当应用较大的$font-size变量赋值：

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} 
body { 
    font-size: $font-size; 
}

但一样，就像上面的媒体块示例，Sass彻底忽略了该变量的赋值，这意味着这是不可能发生的。编译后的代码以下：

body { 
    font-size: 1em;
}

预处理器变量不继承

虽然继承严格说来是级联的一部分，之因此把它单独分出来说，是由于屡次想调用这个特性却不得。

假设一种状况，要在DOM元素上基于其父元素应用的颜色而设置样式：

.alert {
    background-color: lightyellow;
}
.alert.info {
    background-color: lightblue;
}
.alert.error {
    background-color: orangered;
}

.alert button {
    border-color: darken(background-color, 25%);
}

上面的代码并非有效的Sass（或CSS），但你应该明白它想达到什么目的。

最后一句声明试图在<button>元素从父元素.alert元素继承的background-color属性使用Sass的darken函数。若是类info 或error已经加在了.alert上（或若是background-color已经过JavaScript或用户样式设置），button元素能据此做出相应的响应。

显然这在Sass中行不通，由于预处理器不知道DOM结构，但但愿你清楚的认识到为何这类东西是有用的。

调用一个特定的用例：出于可访问性的缘由，在继承了DOM属性上运行颜色函数是极其方便的。例如，确保文本始终可读，并充分与背景颜色造成鲜明对比。有了自定义属性和新的CSS颜色函数，很快这将成为可能。

预处理器变量不可互操做

这是预处理器相对明显的一个缺点，提到它是由于我以为它重要。若是你正使用PostCSS来构建网站，想使用只能经过Sass实现主题化的第三方组件，那你真是不走运了。

跨不一样的工具集或CDN上托管的第三方样式表共享预处理器变量是不可能（或至少不容易）的。

原生的CSS自定义属性能够与任何CSS预处理器或纯CSS文件一块儿使用。反之则否则。

下面给一个css变量在媒体查询中的使用：

:root {
    --gutter: 1.5em;
}

@media (min-width: 30em) {
    :root {
        --gutter: 2em;
    }
}
@media (min-width: 48em) {
    :root {
        --gutter: 3em;
    }
}

若是是预处理器这样写就无效了。

参考

Using CSS custom properties (variables)
小tips:了解CSS/CSS3原生变量var
我为何对原生CSS变量感到兴奋