CSS Variables学习笔记

mudiyouyou 发布于2019-08-29 15:11 / 2775人阅读

摘要：注本文首发于个人博客学习笔记。最近看了下变量，又名自定义属性，跟大家分享一下我的学习笔记。使用自定义属性来设置变量名，并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单，如下，声明了一个名叫的变量。

注：本文首发于个人博客《CSS Variables学习笔记》。

最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。

一、什么是CSS Variables

来，直接看MDN上的描述：

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。

color: var(--main-color);

二、学习笔记 1. 声明 & 调用 i. 声明方式

CSS变量声明的方式非常简单，如下，声明了一个名叫color的CSS变量。

在css文件中写

写在html标签的inline-style里

用JS给某个元素声明，方法.style.setProperty

body{
  --color: red;
}

document.getElementsByTagName("body")[0].style.setProperty("--color", "red")

ii. 调用方式

通过var()函数调用，如：

.block{
  color: var(--color);
}

iii. 变量的命名

说完声明和调用，还有个小问题。那么，CSS变量的命名，有什么限制么？下面我们来测试一下。

.foo-test{
  --foo:;
  --ffoo:;
  --Foo: red;
  --FOo: blue;
  --FOO: green;
  /* 以下省略测试className的代码 */
}

从以上测试代码可以看出：

CSS变量的命名是大小写敏感的

不赋值或者赋值空格，都是无效的

2. 作用域 & 继承

CSS变量也有作用域一说，而最顶层的作用域就是:root，下面的所有的元素都可以共享相关CSS变量。

:root{
  --color: green;
}

刚才我们在body上，定义了--color，在body下的子元素，都会默认继承这个属性，随意使用。当然也可以重载，把--color定义为别的值。


  inherit color
  overwrite color - hello world

body{
  --color: green;
}
.block{
  color: var(--color);
}
.css-var-text{
  --color: red;
  color: var(--color);
}

.block，作为body的子元素，继承了--color属性，所以边框出来就是green。

而.css-var-text在自己的作用域中，重写了--color，出来的字体颜色是overwrite后的blue。

3. 浏览器支持 i. 浏览器支持现状

来看看caniuse上CSS Variables (Custom Properties)的支持度：

PC的话，IE 11和Edge的支持度都很差，而Chrome（2016.3）、Firefox（2017.11）和Safari(2017.3)的一些新版本都是支持的，相信很快就能普及。

Mobile的话，Safari在2016年的版本已经支持CSS变量了，但Opera、Chrome、UC等的支持还不太好。

ii. fallbacks

浏览器的支持度不太好，我们又想玩新东西的话，就需要考虑如果浏览器不支持CSS变量，怎么优雅降级。（嗷，两套代码是有点……）

/* 当浏览器不支持CSS变量 */
.browser-support{
  background: red;  
}

/* 当浏览器支持CSS变量 */
@supports (--css: variables) {
  .browser-support{
    background: var(--color);
  }
}

三、代码习作 1. codepen

在学习CSS Variables的时候，有边写一些教程的demo，除了以上，还包括一些实际场景的应用，如像box-shadow复合属性的拆解，以及JS操作CSS变量等。

CSS Varibles Study Notes on Codepen.io.

2. flexbox属性的DEMO

之前在团队也做过一下下flexbox的分享，大家也知道，flex属性和对应的值特别多，当时就很想做个可以随时变属性值看效果的playground。

但想了下传统的实现方式，貌似没有优雅的方法。

CSS+JS实现：写一批classname，option切换时，通过JS修改classname改变样式；

纯JS实现，根据option的value用JS改写元素的inline style（一直修改dom）

哎哟，换CSS Variables之后，一切就不一样了，可继承、可复用、易维护，目前实现比较简单，可能跟以上的传统方式差别不太大，不过后续要修改或者做更多优化，我相信优势就会凸显出来了。

demo传送门：wuyuying.com/flexbox-css-var

github传送门

小结

哈哈，没想到小结写什么，如果大家有好玩的CSS Variables的应用，欢迎分享给我：）

私有云云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113156.html

Day03 - CSS 变量

摘要：变量作者简介是推出的一个天挑战。这是一个的新特性，和目前都还不支持。命名写法是变量名，在引用这个变量时写法是变量名。如何用改变属性值在中即代表文档根元素。 Day03 - CSS 变量作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是...

dunizb 2019-08-20 18:09 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

codeKK 2019-08-02 16:16 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

SolomonXie 2019-08-26 13:43 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

HollisChuang 2019-08-30 10:50 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

yexiaobai 2019-08-05 16:55 评论0 收藏0