【CSS】841- 玩转 CSS 变量

前端自习课

共 767字,需浏览 2分钟

 ·

2021-01-17 16:07

作者:wsafight

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


如果当年的 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>
    
    
<div class="text-primary">reddiv>
 
    
    
<main class="text-primary">bluemain>

    
 
<div style='--primary-color: purple" class="text-primary">purple
    

这里我们可以看到针对同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。

由于这个原因,全局的变量通常放在根元素:root里面,确保任何选择器都可以读取它们。

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

同时, CSS 变量提供了 JavaScript 与 CSS 通信的方法。就是利用 js 操作 css 变量。我们可以使用:

<style>
  /* ...和上面 CSS 一致 */  
style>    

    
<div class="text-primary">reddiv
    
    
<main id='primary' class="text-primary">bluemain>
    
 
<div id="secondary" style='--primary-color: purple" class="text-primary">purple