CSS Variable Study

时间 2019-11-08

标签 css variable study 栏目 CSS 繁體版

原文原文链接

CSS变量能帮助咱们干什么

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

1、什么是CSS变量

CSS 变量当前有两种形式：css

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

2、变量的声明

变量的命名

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

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

声明方式

CSS变量声明的方式很是简单，以下，声明了一个名叫color的CSS变量。浏览器

在css文件中写
写在html标签的inline-style里
用JS给某个元素声明，方法.style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')

变量值的类型

若是变量值是一个字符串，能够与其余字符串拼接编程语言

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


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

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

.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);

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

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

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

3、CSS变量的继承&做用域

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

class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

定义下面的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

4、响应式

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

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

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

5、与预处理器的不一样

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

$color:#7F583F;

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

.mediabox {
      background: $color;
}

编译结果

.mediabox {
  background: #7F583F; 
}

二、预处理器不能限定做用域

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

编译为

ul {
  color: blue; 
}

三、预处理器变量不可互操做

原生的CSS自定义属性能够与任何CSS预处理器或纯CSS文件一块儿使用

6、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'

7、兼容性

检测浏览器是否支持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变量和预处理器变量的差别

1. CSS-Study-notes0
2. Study 5 —— CSS概述
3. 引人瞩目的 CSS 变量（CSS Variable）
4. study
5. Study 7 —— CSS美化背景和边框
6. the first week study
7. perl study note
8. go-study
9. Study
10. Oracle Study之--NLS_DATE_FORMAT
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议