使用 CSS 变量编写你的样式代码

基本使用：

1. --variable: <declaration-value>

2. <css-attribute>: var(--variable)

第一个是定义 css 变量 其中 --variable 可以是自定义的名称，但是必须 -- 开头，冒号后面是变量的值（变量：值）

第二个是在选择器中使用一开始定义好的 css 变量，使用方式就和正常写样式一样，只是将你的对应属性的值替换成了 var(css变量)

相信你已经看出来了，这个特性和使用 less、sass、stylus 等 css 预处理器书写方式基本一致，但是 css 变量属于原生支持，不用担心依赖工具出错以及后续技术改造等问题，甚至你可以考虑在你的预处理器代码中使用 css 变量（当然，这种极不推荐）。

《小博主与大老爷的小剧场 001》

爷：

　　握草，你废话咋那么多！丫的直接上代码好不好？

博主：

　　大...大爷，您稍等，马上就上代码，保证新鲜可口。

　　首先，使用 css variable 的话必须在选择器内定义变量

:root {

  --main-color: yellowgreen;

}

.yellowgreen {

  color: var(--main-color);

  background-color: bisque;

}

爷：

　　就没了？这么两句就没了？耍我是不！

博主：

　　当然没有结束啦，上面只是介绍了 css variable 怎么使用的，既然是变量，那么自然得有作用域啦，css variable 作用根据 html 中选择器的结构来的，不像 css 预处理器是根据文件来的，如果你在 css 预处理器中使用变量还必须将变量文件引入到当前的文件中才行，css variable 则不需要限制与文件作用域而是选择器作用域。

　　选择器作用域，顾名思义，能被改选择器命中的话就可以使用该变量，而 css variable 不受文件作用域限制的原因也在于此，由于最终都是在浏览器中的同一个页面中运行，那么自然所有的变量和选择器都在同一个页面的作用域中了，因为 css 在运行时才会解析，所以只要你的变量先声明的在使用时自然就能正确解析。

　　爷...爷别打了，废话讲完了，给您上代码。

index.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="./variable.css">

  <link rel="stylesheet" href="./color.css">

</head>

<body>

  <div class="main">

    <ul>

      <li class="main-bg-gray">list-01</li>

      <li>list-02</li>

      <li>list-03</li>

    </ul>

    <p>爷，您看看！我是紫色的 >_< </p>

  </div>

</body>

</html>

variable.css

:root {

  --main-bgc: #ddd;

  --main-color: blueviolet;

}

color.css

ul {

  background-color: var(--main-bgc);

}

.main {

  color: var(--main-color);

}

li {

  --main-color: yellowgreen;

  color: var(--main-color);

}

.main-bg-gray {

  --main-bgc: #4af;

  --main-color: blue;

}

结果如下：

　　

　　选择器作用域如下

　　因此这里的最终生效的变量使用就清晰明了了，依然还是 css 选择器的选择，按照权重来就 O..K 了。至于权重算法：!important > id > inline > class > tag 这个肯定不用我说了对吧。

爷：

　　所以嘞，除了变量使用脱离了 css 预处理器外还有啥用吗？只有这点的话还不如回去用我的 sass、less。

博主：

　　您使用 sass、less 使用变量主要干嘛呢，变量服用带来的最大特点是啥呢？

爷：

　　有屁快放！

博主：

　　主题定制啊，还有就是自适应布局啦，用在这些方面都是杠杠的啊。

　　您想想啊，使用 css 预处理器本质上不是在写 css，而是写了一个类似 css 的预处理器语法，然后通过预处理器的编译器将其编译成 css，其中变量也只能在编译前使用，编译后会将变量的值给放到编译后的 css 中去浏览器调试时并不方便调试主题样式的更改，基本都是改一次编译一次再看一次，而且编译出来的 css 代码量会增大好几倍，甚至十余倍都有可能。

　　而使用 css variable 书写的 css 在浏览器可以直接调试，且代码量没有任何增加，最多使用 postcss 等工具添加个前缀做兼容，尤其对于自适应布局，那省的代码可不是一星半点，以往自适应在移动端上可能 css 的大小都超过 html+JavaScript 之和了。

爷：

　　听起来貌似时蛮不错的啊，可以考虑搭个自己的博客用用，兼容性如何？

博主：

　　这个嘛......额......，您自己看吧

爷：

　　这兼容性，玩个锤子啊！

博主：

　　爷，爷，您别急，我们高技术的不能拘泥与那些老旧的浏览器啊，我们自己得先提高，再逐步引导客户您说是不，总不能因为客户中有几个不兼容我们就让所有客户都去将就对吧。况且您要是搭建一个个人博客，那过来看您博客的不都是技术领域的人嘛，他们又有几个人用那些低版浏览器呢对不（针对测试的除外）。

爷：

　　有那么点道理哦，回头选个良辰吉日给办了？让我想想看啊......

博主：

　　（小声嘀咕）还良辰吉日，你咋不春宵一刻呢，你要搭就搭呗，管我尦事啊 (￢︿̫̿￢☆)。

CSS变量（CSS variable）的更多相关文章

  1. CSS变量（自定义属性）实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  2. CSS变量实用指南及注意事项

    近年来,一些动态特性已经开始成为 CSS 语言本身的一部分. CSS变量 – 官方的术语为 "自定义属性" – 已经已经加入规范并且具有很好的浏览器支持,而 CSS mixins ...

  3. JavaScipt30(第三个案例)（主要知识点：css变量）

    承接上文 https://www.cnblogs.com/wangxi01/p/10641210.html,下面是第三个案例: 附上项目链接: https://github.com/wesbos/Ja ...

  4. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

  6. 实现响应式——CSS变量

    CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...

  7. CSS 变量教程

    一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...

  8. css变量的应用

    微软在2017年3月份宣布 Edge 浏览器将支持 CSS 变量,到现在已经过去一年多了,哈哈,是不是有点后知后觉? 这个知识点是在阮一峰的日志上浏览到的,在此借用一下了..跟大家分享一下..... ...

  9. CSS变量教程

    今年三月,微软宣布 Edge 浏览器将支持 CSS 变量. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声 ...

随机推荐

  1. Robots.txt在项目中的运用

    在开发公司一个项目的过程中,有这样一个需求 该网站上面有一个search功能,可以search该网站上的任何包括特定内容的网页 现在有一个需求,就是针对几个特定的页面,我们希望网站上的search功能 ...

  2. Unity 点乘与叉乘 计算敌人位置

    点乘:表示两个向量夹角 a*b=|a| * |b| * cos(ab),判断敌人在前后方 叉乘:表示两向量的法线

  3. Logstash过滤插件

    filter初级 Logstash安装 ### 设置YUM源 # rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch # t ...

  4. Go:Nsq消息队列

    Nsq服务端简介 在使用Nsq服务之前,还是有必要了解一下Nsq的几个核心组件整个Nsq服务包含三个主要部分 nsqlookupd 先看看官方的原话是怎么说:nsqlookupd是守护进程负责管理拓扑 ...

  5. java中pojo对象首字母大写导致无法赋值问题

    命名规范(文末附有java命名规范)中指出,属性变量命名应采用驼峰命名的方式,即首字母小写,其他单词首字母大写: 但有时候我们对接三方的接口时,想要封装实体类来接受,但是发现接收到的参数的变量首字母是 ...

  6. Android Gradle 学习笔记（六）：Gradle 插件

    Gradle 本身提供了一些基本的概念和整体核心的框架,其他用于描述真实使用场景的都可以通过插件扩展的方式来实现.这样就可以通过抽象的方式提供一个核心的框架,其他具体的功能和业务都通过插件扩展的方式来 ...

  7. thinkphp5命令行访问

    入口文件后加一个空格就行了 1,首先cd到站点目录public下,我的入口文件是默认的index.php,然后执行以下命令, 2,php要加入环境变量 访问index模块下的index控制器下的tes ...

  8. 简单的PHP+Mysql实现分页

    <?php /** * PHP+Mysql实现分页 * **/ ?> <html> <head> <meta http-equiv="Content ...

  9. CF　C. Plasticine zebra　（思维）

    题意: 是输入一个只有'w','b'的字符串,可以对他的任意位置切割成两个子串,切割后的右边的子串翻转后再和左边的子串拼起来会得到一个新的字符串,操作次数不限,问能得到的字符串中wb交替出现的最大的长 ...

  10. hive与hbase关联

    进入hbase: hbase shell 进入HIVE: hive hbase中建一张t_student_info表,添加两个列族 create 't_student_info','st1','st2 ...