css使用变量_使用CSS变量优化CSS长度

css使用变量

您是否曾经不得不编写大量CSS，却迷失了自己的代码？ 如果您像我一样，有时您必须将颜色或文本大小的十六进制代码保存在可以访问和重复使用的位置。 在本文中，我将分享有关如何使用CSS变量优化CSS的知识。 CSS变量是我们定义的值，可在整个CSS文档中重复使用。 CSS变量（也称为自定义属性）在一个位置设置并在许多位置引用，就像您将设置变量并以其他编程语言引用一样。

声明一个自定义变量

这里的要点是如何声明变量以及如何访问它们。 CSS中的变量是通过以两个破折号开头，后跟变量名称来定义的。 这是一个如何在CSS中声明自定义变量的示例。

:root {
  --main-color : #54BBCE ;
}

在根选择器中设置变量非常有用，因为它使我们能够访问整个文档。 我们可以在选择器中定义它，但是它将仅对该选择器可用，这将无用。

如何使用自定义变量？

定义自定义变量后，我们下一步可以在代码的另一部分中使用它。 要使用自定义变量，我们使用关键字var（）。

.menu {
  width : 100% ;
  background-color : var (--main-color);
}

我们用于访问自定义变量的var关键字有两个参数。 第一个是要替换的定制属性的名称，第二个是后备值，当引用的定制属性无效时使用该值。

.menu {
  width : 100% ;
  background-color : var (--main-color, #999AAA);
}

无效的属性和后备

如下面的示例中所示，当我们替换无效的属性时，将使用该属性的初始值或继承的值。

:root {
  --main-color : #da68aa ;
  --tag-text : 12px ;
}
...
.author {
  color : red;
}
...
.author-tag {
  color : var (--tag-text);
}

具有.author-tag类的元素的颜色将为红色，因为提供给var的属性无效。

下面我们有一个使用CSS自定义变量且不包含CSS自定义变量的示例。 编写的代码行数大大减少了。

具有自定义属性CSS

:root {
  --main-color : #da68aa ;
  --tag-text : 12px ;
}
body {
  font-family : sans-serif;
}
.menu {
  width : 100% ;
  background-color : var (--main-color);
}
.menu ul {
  width : 100% ;
}
.menu ul li {
  display : inline-block;
  color : #ebeae6 ;
  width : 20% ;
}

.welcome h1 {
  color : var (--main-color);
}
.author {
  color : red;
}
.author img {
  width : 20% ;
  border : 2px solid #0269adc5 ;
}
.author-tag {
  color : var (--tag-text);
}

button {
  border : none;
  padding : 5px ;
  border : 1px solid var (--color, black);
}
button :hover {
  background-color : var (--color);
}
.php {
  --color : blue;
}
.ruby {
  --color : red;
}
.js {
  --color : rgb (131, 245, 1);
}
.react {
  --color : rgb (1, 135, 245);
}

没有自定义属性CSS

:root {
  --main-color : #da68aa ;
  --tag-text : 12px ;
}
body {
  font-family : sans-serif;
}
.menu {
  width : 100% ;
  background-color : var (--main-color);
}
.menu ul {
  width : 100% ;
}
.menu ul li {
  display : inline-block;
  color : #ebeae6 ;
  width : 20% ;
}

.welcome h1 {
  color : var (--main-color);
}
.author {
  color : red;
}
.author img {
  width : 20% ;
  border : 2px solid #0269adc5 ;
}
.author-tag {
  color : var (--tag-text);
}

button .php {
  border : none;
  padding : 5px ;
  border : 1px solid blue;
}
button .ruby {
  border : none;
  padding : 5px ;
  border : 1px solid red;
}
button .js {
  border : none;
  padding : 5px ;
  border : 1px solid rgb (131, 245, 1);
}
button .react {
  border : none;
  padding : 5px ;
  border : 1px solid rgb (1, 135, 245);
}

.php :hover {
  background-color : blue;
}

.ruby :hover {
  background-color : red;
}
.js :hover {
  background-color : rgb (131, 245, 1);
}
.react :hover {
  background-color : rgb (1, 135, 245);
}

当我们充分利用Custom属性时，我们可以减小CSS文件的大小。 它还可以简化大型文档之间的访问和更改。 使用值就像引用属性名称一样容易。
CSS变量几乎无济于事，但是，由于CSS变量是CSS的一部分，因此您无需安装任何程序即可使用它。

翻译自: https://hackernoon.com/optimize-your-css-length-with-css-variables-mz2i3aqy

css使用变量