kk Blog —— 通用基础

https://blog.51cto.com/u_2865456/5040535

很早直接就了解到CSS变量相关的内容，奈何之前使用价值不高（很多主流浏览器不兼容）

最近发现主流浏览器都已经支持了这一变化

这一重要的变化，可能会让你发现，原生CSS从此变的异常强大~，下面看一下如何使用

变量的声明

css的变量声明标识符为：–，即变量名前面加2个连接线

1
2
3
4

body {
  --head_color: #000;
  --head_bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量。它与正常的属性定义上没有什么不同，只是没有默认含义，所以其又叫做CSS自定义属性

这里需要注意的是，其变量名对大小写是敏感的。

变量的引用

变量的引用也很简单，它为我们提供了一个方法专门进行引用，var()函数用于读取变量。

1
2
3

.head {
  color: var(--head_color);
}

这样就引用了，另外，如果你担心变量没有定义，它还提供了默认值的设置方式。

可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

1

color: var(--head_color, #7F583F);

需要注意的是，变量值只能用作属性值，不能用作属性名。

如果变量值是数值，不能与数值单位直接连用。

1
2
3
4
5

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

数值与单位直接写在一起，必须使用 calc() 函数，将它们连接。

1
2
3
4

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

作用域

变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

所以，如果你的变量是全局享用的，则建议放在 :root 上，例如：

1
2
3

:root {
    --color: red;
}

当然，也可以使用body或者html标签：

1
2
3

body {
    --color: red;
}

CSS变量就像JS的变量，每个类名或者花括号就像一个 function ，里面的变量只有上下文以内可以获取，这就让CSS有了更多可能性。

这使得外部变量稍微改变，整个CSS都可以大大联动，且是实时的。