CSS Variable Study

hersion 发布于2019-08-29 16:09 / 2178人阅读

摘要：在像这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。可以被使用在任意的地方。

CSS变量能帮助我们干什么

在一些命令式编程语言中，像Java、C++亦或是JavaScript，通过变量我们能够跟踪某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
在像CSS这种声明式语言中，随着时间而改变的值并不存在，也就没有所谓变量的概念了。
CSS 引入了一种层级变量的概念，从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量

一、什么是CSS变量

CSS 变量当前有两种形式：

变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量

二、变量的声明

变量的命名

变量声明使用两根连词线--表示变量，$color是属于Sass的语法，@color是属于Less的语法，为避免冲突css原生变量使用--）

注意: 变量名大小写敏感，--header-color和--Header-Color是两个不同变量

声明方式

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

在css文件中写

写在html标签的inline-style里

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

body{
  --color: red;
}

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

变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接

--bar: "hello";
--foo: var(--bar)" world";


body:after {
  content: "--screen-category : "var(--screen-category);
}

如果变量值是数值，不能与数值单位直接连用,必须使用calc()函数，将它们连接

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串

/* 无效 */
.foo {
  --foo: "20px";
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

注意: 变量值只能用作属性值，不能用作属性名

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量--side用作属性名，这是无效的

三、CSS变量的继承&作用域

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素

class="one">

定义下面的CSS：

.two { --test: 10px; }
.three { --test: 2em; }

在这个例子中，var(--test)的结果是：

class="two" 对应的节点: 10px

class="three" 对应的节点: element: 2em

class="four" 对应的节点: 10px (inherited from its parent)

class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值

最顶层的作用域就是:root

四、响应式

div {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

五、与预处理器的不同

1、预处理器变量不是实时的

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

编译结果

.mediabox {
  background: #7F583F; 
}

2、预处理器不能限定作用域

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

编译为

ul {
  color: blue; 
}

3、预处理器变量不可互操作

原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用

六、JS操作变量

CSS 变量可以和 JS 互相交互

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue("--testMargin").trim();
console.log(cssVariable1); // "70px"
 
// 写入
document.documentElement.style.setProperty("--testMargin", "100px");
var cssVariable2 = root.getPropertyValue("--testMargin").trim();
console.log(cssVariable2);  // "100px"

// 删除
document.documentElement.style.removeProperty("--testMargin");
var cssVariable3 = root.getPropertyValue("--testMargin").trim();
console.log(cssVariable3); // "70px"

七、兼容性

检测浏览器是否支持CSS自定义属性的方法

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports("--a", 0)) {
    alert("CSS properties are supported");
} else {
    alert("CSS properties are NOT supported");
}

https://caniuse.com/#search=c...

总结

相较于传统的 LESS 、SASS 等预处理器变量，CSS 变量的优点在于:

CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改

CSS 变量能够继承，能够组合使用，具有作用域

配合 Javascript 使用，可以方便的从 JS 中读/写

参考

CSS 变量教程
使用CSS变量
CSS变量和预处理器变量的差异

GPU云服务器云服务器 study variable variable值 css引入css

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

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

webpack使用之基础篇

摘要：是一个和差不多同时代的产物，但是它只支持基于，对于来说只能兴叹了。找一个自己顺手的就好，顺便一提，我现在主要使用辅助。说到自动化构建，你想到了什么？基于AMD的requirejs？还是基于commoJS的browserify？他们都在各自的领域或者说时代发挥了很重要的作用。但是时代的变迁，webpack成了现在的佼佼者，我们不知道什么时候wepback也会被取代，但是现在我们必须要掌...

zhichangterry 2019-08-19 18:33 评论0 收藏0
Meteor的模板

摘要：在文件中使用模板模板定义三个最高级别的标签不用写了，能省则省的模板可以自由的使用标签比如上面的使用的标签。在模板中使用逻辑是模板语言，是安全的不会输出标签他具有以下常用的语法导入指定的模板循环判断等详细的说明可以参考。新建一个项目Meteor meteor create meteor-template 会生成三个文件： meteor-template.css meteor-templ...

cjie 2019-06-26 16:55 评论0 收藏0
React 导读（一）

摘要：需要有一定的基础和的使用经验。这就是属性的作用。方法接收一个新对象来重新赋值。也接收一个函数，这个回调函数这里我默认有一个参数，表示之前的的值，这个函数的返回值就是最新的。但是不同的是在组件内部是只读的。前言写这篇文章的主要目标是让初学者更快的上手 React 的项目开发，能有一个循循渐进的理解过程。需要有一定的 JavaScript 基础和 NPM 的使用经验。不多说了，下面会按...

kumfo 2019-08-22 15:35 评论0 收藏0
百度网盘文件夹框选功能

摘要：案例说明使用原生完成桌面操作级应用，对于原生的掌握情况而言，是一个较为全面的综合型案例。本次课从事件相关的功能入手，给大家带来详细的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例说明：使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家...

jkyin 2019-08-29 16:55 评论0 收藏0
[新手坑] 02.Vue开发环境和生产环境样式不一致的问题

摘要：新手坑开发环境和生产环境样式不一致的问题上次提到作用域问题导致样是不生效这次讲的是我之前遇到的一个小坑稍不留神就完蛋前阵子做的一个小项目引入了的库外加自己写的很多样式在开发环境下测试完美直接就出来上正式环境发现竟然有多处样式未生效的问题还好 [新手坑] 02.Vue开发环境和生产环境样式不一致的问题上次提到作用域问题, 导致样是不生效, 这次讲的是我之前遇到的一个小坑, 稍不留神就完...

RdouTyping 2019-08-29 15:07 评论0 收藏0