关于css:玩转-CSS-变量

如果当年的 CSS 预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 CSS 变量对于我来说无疑就是晴天霹雳。其性能岂但能够优雅的解决之前 js 不好解决或不适宜的业务需要。更在创造力无穷的前端开发者手中大放异彩。

在前端的畛域中，规范的实现总是比社区的约定要慢的多，前端框架最喜爱的 $ 被 Sass 变量用掉了。而最罕用的 @ 也被 Less 用掉了。官网为了让 CSS 变量也可能在 Sass 及 Less 中应用，无奈只能斗争的应用 –。

<style>
  /* 在 body 选择器中申明了两个变量  */ 
  body {
    --primary-color: red;
    /* 变量名大小写敏感，--primary-color 和 --PRIMARY-COLOR 是两个不同变量 */  
    --PRIMARY-COLOR: initial;  
  }

  /** 同一个 CSS 变量，能够在多个选择器内申明。优先级高的会替换优先级低的 */
  main {--primary-color: blue;}
    
  /** 应用 CSS 变量 */
  .text-primary {/* var() 函数用于读取变量。*/  
    color: var(--primary-color)
  }
<style>
    
<!-- 出现红色字体,body 选择器的色彩  -->    
<div class="text-primary">red</div> 
    
<!-- 出现蓝色字体，main 选择器定义的色彩  -->    
<main class="text-primary">blue</main>
    
<!-- 出现紫色字体，以后内联样式表的定义  --> 
<div style='--primary-color: purple" class="text-primary">purple</main>

这里咱们能够看到针对同一个 CSS 变量，能够在多个选择器内申明。读取的时候，优先级最高的申明失效。这与 CSS 的 ” 层叠 ”（cascade）规定是统一的。

因为这个起因，全局的变量通常放在根元素 :root 外面，确保任何选择器都能够读取它们。

:root {--primary-color: #06c;}

同时，CSS 变量提供了 JavaScript 与 CSS 通信的办法。就是利用 js 操作 css 变量。咱们能够应用：

<style>
  /* ... 和下面 CSS 统一 */  
</style>    

<!-- 出现黄色字体  -->    
<div class="text-primary">red</div> 
    
<!-- 出现蓝色字体，main 选择器定义的色彩  -->    
<main id='primary' class="text-primary">blue</main>
    
<!-- 出现紫色字体，以后内联样式表的定义  --> 
<div id="secondary" style='--primary-color: purple" class="text-primary">purple</main>    

<script>
// 设置变量
document.body.style.setProperty('--primary-color', 'yellow');
                                                           
// 设置变量，js DOM 元素 ID 就是全局变量，所以间接设置 main 即可
// 变为 红色
primary.style.setProperty('--primary-color', 'red');    

// 变为 黄色，因为以后款式被移除了，应用 body 下面款式
secondary.style.removeProperty('--primary-color');

// 通过动静计算获取变量值
getComputedStyle(document.body).getPropertyValue('--primary-color')

</script>

咱们能够在业务我的项目中定义以及替换 CSS 变量, 大家能够参考 mvp.css。该库大量应用了 CSS 变量并且让你去依据本人需要批改它。

:root {
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color: #118bee;
  --color-accent: #118bee0b;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f4;
  --color-text: #000;
  --color-text-secondary: #999;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 150%;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
}

咱们能够看到基于 CSS 变量，能够更敌对的和设计师的设计用意联合在一起。也易于批改，在业务我的项目中正当应用无疑能够事倍功半。

如果让我来思考，我必定无奈设想出联合 CSS 预处理器 + CSS 变量便能够实现组件款式的默认配置。这里我先介绍两个对于该性能的前置知识点:

事实上，CSS 变量的 var() 函数还能够应用第二个参数，示意变量的默认值。如果该变量此前没有定义或者是有效值，就会应用这个默认值。

/* 没有设置过 --primary-color，色彩默认应用 #7F583F */
color: var(--primary-color, #7F583F);

尽管目前 CSS 变量不是新的属性，但究竟不是所有的浏览器都反对 CSS 变量的，这里咱们还是要考虑一下优雅降级。

/* 对于不反对 CSS 变量的浏览器，能够采纳上面的写法。*/
a {
 /* 色彩默认值 */
  color: #7F583F;
  /* 不反对则不辨认该条规定 */  
  color: var(--primary);
}

联合 CSS 处理器 + CSS 变量便能够实现组件款式的默认配置。这里参考了有赞的 Vant Weapp 的做法。有赞代码 theme.less 如下所示:

// 先导入所有 Less 变量
@import (reference) './var.less';

// 利用正则去替换 Less 变量 为 CSS 变量
.theme(@property, @imp) {@{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
  @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
}

函数成果如下所示:

@import '../common/style/theme.less';

.van-button {
  // ... 其余省略
  .theme(height, '@button-default-height');
    
  .theme(line-height, '@button-line-height');
    
  .theme(font-size, '@button-default-font-size');
}

// => less 编译之后生成

.van-button{
   // ... 其余省略
  height:44px;
  height:var(--button-default-height,44px);
    
  line-height:20px;
  line-height:var(--button-line-height,20px);
    
  font-size:16px;
  font-size:var(--button-default-font-size,16px);
}

咱们能够看到每调用一次 Less 函数将会被编译成两个属性。第一个属性的设定对于不反对 CSS 变量的设施能够间接应用，如果以后设施反对 CSS 变量，则会应用 CSS 变量，然而因为以后 CSS 变量未定义，就会应用变量的默认值。尽管 ‘@button-default-height 尽管也是一个变量，然而该变量仅仅只是 less 变量，最终生成的代码中并没有 –button-default-height 这样的变量。此时咱们就能够在应用款式的地位或者 :root 中增加变量 –button-default-height。

这种形式更适宜组件开发，因为该计划不申明任何 css 变量，只是预留的 css 变量名称和默认属性。这样的话，无论开发者的选择器优先度有多低，代码都能够很容易的笼罩默认属性。因为咱们仅仅应用 css 的默认值。

大家可能有时候会想，这样的话，咱们不是有更多的代码了吗？其实未必，事实上咱们能够间接间接在页面外部定义变量款式。其余组件间接通过 style 去应用页面内的变量。当然了，事实上书写的代码多少，重点在于想要管制默认款式的粒度大小。粒度越小，则须要在各个组件外部书写的变量越多，粒度大，咱们也就不用思考太多。

CSS 没有逻辑切换仿佛是一种共识，然而咱们能够利用选框 (单选与多选) 和 CSS 变量来实现判断逻辑。咱们先来看看如何应用 CSS 变量。

<style>
  .red-box {
    --toggler: ;
    --red-if-toggler: var(--toggler) red;
    background: var(--red-if-toggler, green); /* will be red! */
  }
  .green-box {
    --toggler: initial;
    --red-if-toggler: var(--toggler) red;
    background: var(--red-if-toggler, green); /* will be green! */
  }

</style>
<!-- 宽度高度为 100px 的 红色盒子 -->
<div 
  style="height: 100px; width: 100px" 
  class="red-box"
></div> 
<!-- 宽度高度为 100px 的 绿色盒子 -->
<div 
  style="height: 100px; width: 100px" 
  class="green-box"
></div>

这里因为一个变量 –toggler 应用空格或者 initial 而产生了不同的后果，基于这样的后果咱们不难想象咱们能够触发变量的批改而产生不同的后果。

他不是一个 bug，也不是一个 hack。他的原理完完全全的在 CSS Custom Properties 标准中。

This value serializes as the empty string, but actually writing an empty value into a custom property, like –foo: ;, is a valid (empty) value, not the guaranteed-invalid value. If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.

解释如下，事实上 -foo: ; 这个变量并不是一个有效值，它是一个空值。initial 才是 CSS 变量的有效值。其实这也能够了解，css 没有所谓的空字符串，空白也不代表着有效，只能应用特定值来示意该变量有效。这个时候，咱们再回头来看原来的 CSS 代码。

.red-box {
  /* 以后为空值 */
  --toggler: ;

  /* 因为 var(--toggler) 失去了空, 所以失去后果 为 --red-if-toggler:  red */
  --red-if-toggler: var(--toggler) red;
  /** 变量是 red, 不会应用 green */
  background: var(--red-if-toggler, green); /* will be red! */
}
.green-box {
  /** 以后为有效值 */
  --toggler: initial;
  /** 仍旧有效数据，因为 var 只会在参数不是 initial 时候进行替换 */
  --red-if-toggler: var(--toggler) red;
  /** 最终有效值没用，失去绿色 */
  background: var(--red-if-toggler, green); /* will be green! */

  /* 依据以后的性能，咱们甚至能够做到 and 和 or 的逻辑 
   * --tog1 --tog2 --tog3 同时为 空值时是 红色
   */
  --red-if-togglersalltrue: var(--tog1) var(--tog2) var(--tog3) red;

 /*
  * --tog1 --tog2 --tog3 任意为 空值时是 红色
  */ 
  --red-if-anytogglertrue: var(--tog1, var(--tog2, var(--tog3))) red;
}

当咱们须要开发响应式网站的时候，咱们必须要应用媒体查问 @media。先看一下用传统的形式编写这个根本的响应式 CSS：

.breakpoints-demo > * {
  width: 100%;
  background: red;
}

@media (min-width: 37.5em) and (max-width: 56.249em) {
  .breakpoints-demo > * {width: 49%;}
}

@media (min-width: 56.25em) and (max-width: 74.99em) {
  .breakpoints-demo > * {width: 32%;}
}

@media (min-width: 56.25em) {
  .breakpoints-demo > * {background: green;}
}

@media (min-width: 75em) {
  .breakpoints-demo > * {width: 24%;}
}

同样，咱们能够利用 css 变量来优化代码构造，咱们能够写出这样的代码：

/** 挪动优先的款式规定 */
.breakpoints-demo > * {
  /** 小于 37.5em, 宽度 100%  */
  --xs-width: var(--media-xs) 100%;

  /** 小于 56.249em, 宽度 49%  */
  --sm-width: var(--media-sm) 49%;

  --md-width: var(--media-md) 32%;
  --lg-width: var(--media-gte-lg) 24%;
  

  width: var(--xs-width, var(--sm-width, var(--md-width, var(--lg-width))));

  --sm-and-down-bg: var(--media-lte-sm) red;
  --md-and-up-bg: var(--media-gte-md) green;
  background: var(--sm-and-down-bg, var(--md-and-up-bg));
}

能够看出，第二种 CSS 代码十分清晰，数据和逻辑放弃在一个 CSS 规定中，而不是被 @media 切割到多个区块中。这样，岂但更容易编写，也更加容易开发者读。详情能够参考 css-media-vars。该代码库仅仅只有 3kb 大小，然而却是把整个编写代码的格调批改的齐全不同。原理如下所示:

  
/**
 * css-media-vars
 * BSD 2-Clause License
 * Copyright (c) James0x57, PropJockey, 2020
 */

html {
  --media-print: initial;
  --media-screen: initial;
  --media-speech: initial;
  --media-xs: initial;
  --media-sm: initial;
  --media-md: initial;
  --media-lg: initial;
  --media-xl: initial;
  /* ... */
  --media-pointer-fine: initial;
  --media-pointer-none: initial;
}

/* 把以后变量变为空值 */
@media print {html { --media-print: ;}
}

@media screen {html { --media-screen: ;}
}

@media speech {html { --media-speech: ;}
}

/* 把以后变量变为空值 */
@media (max-width: 37.499em) {
  html {
    --media-xs: ;
    --media-lte-sm: ;
    --media-lte-md: ;
    --media-lte-lg: ;
  }
}

继 CSS 键盘记录器裸露了 CSS 安全性问题之后，CSS 变量又一次让我看到了玩技术是怎么样的。CSS Space Toggle 技术岂但能够利用于下面的性能，甚至还能够编写 UI 库 augmented-ui 以及扫雷游戏。这几乎让我眼界大开。在我无限的开发生涯中，难找到第二种相似于 css 这种设计用意和应用形式差别如此之大的技术。

CSS 是很乏味的，而 CSS 的乏味之处就在于最终出现进去的技能强弱与你本身的思维形式，创造力是密切相关的。上文只是介绍了 CSS 变量的一些玩法，兴许有更多有意思的玩法，不过这就须要大家的创造力了。

augmented-ui

css-media-vars

css-sweeper

如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。
博客地址

关于css:玩转-CSS-变量

根底用法

实现默认配置

Space Toggle 逻辑切换

旧式媒体查问

其余

参考资料

激励一下