玩转 CSS 变量

更新日期: 2020-08-22阅读: 2.3k标签: 变量

如果当年的 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>red</div> 
    
<!-- 呈现蓝色字体,main 选择器定义的颜色  -->    
<main>blue</main>
    
<!-- 呈现紫色字体,当前内联样式表的定义  --> 
<div>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">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 去使用页面内的变量。当然了,事实上书写的代码多少,重点在于想要控制默认样式的粒度大小。粒度越小,则需要在各个组件内部书写的变量越多,粒度大,我们也就不必考虑太多。


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 变量的一些玩法,也许有更多有意思的玩法,不过这就需要大家的创造力了。

来自:https://github.com/wsafight/personBlog/issues/25

链接: https://fly63.com/article/detial/9599

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

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

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

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写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的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值

点击更多...

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