玩转 CSS 变量

时间 2020-08-21

标签 css 变量栏目 CSS 繁體版

原文原文链接

若是当年的 CSS 预处理器变量对于初入前端的我来讲是开启了新世界的大门，那么 CSS 变量对于我来讲无疑就是晴天霹雳。其功能不但能够优雅的处理以前 js 很差处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。css

基础用法

在前端的领域中，标准的实现老是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最经常使用的 @ 也被 Less 用掉了。官方为了让 CSS 变量也可以在 Sass 及 Less 中使用，无奈只能妥协的使用 --。html

<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里面，确保任何选择器均可以读取它们。git

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

同时， CSS 变量提供了 JavaScript 与 CSS 通讯的方法。就是利用 js 操做 css 变量。咱们可使用：github

<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() 函数还可使用第二个参数，表示变量的默认值。若是该变量此前没有定义或者是无效值，就会使用这个默认值。app

/* 没有设置过 --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 去使用页面内的变量。固然了，事实上书写的代码多少，重点在于想要控制默认样式的粒度大小。粒度越小，则须要在各个组件内部书写的变量越多，粒度大，咱们也就没必要考虑太多。

Space Toggle 逻辑切换

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 一下。
博客地址