乐趣区

关于前端:用5个例子解释CSS变量

jiezi

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

随着 Web 应用程序变得越来越大，CSS 变得越来越大，越来越简短，而且凌乱不堪。在良好的上下文中应用 CSS 变量，可为咱们提供重用和轻松更改反复呈现的 CSS 属性的机制。

在纯 CSS 反对变量之前，咱们有像 Less 和 Sass 这样的预处理程序。然而它们须要在应用前进行编译，因而 (有时) 减少了一层额定的复杂性。

如何定义和应用 CSS 变量（也称为自定义属性）

要申明一个简略的 JS 变量，很简略，如下所示：

let myColor = "green";

要申明一个 CSS 变量，必须在该变量的名字前增加两个横线。

body {--english-green-color: #1B4D3E;}

当初，为了应用 CSS 变量的值，咱们能够应用 var(...) 函数。

.my-green-component{background-color: var(--english-green-color);
}

治理 CSS 变量的最简略办法是将它们申明在 :root 伪类中。鉴于 CSS 变量与其余 CSS 定义一样都遵循规定，因而将它们放在 :root 中将确保所有选择器都能够拜访这些变量。

:root{--english-green-color: #1B4D3E;}

览器对 CSS 变量的反对状况

浏览器对 CSS 变量的反对一点也不差。如果查看 Can I Use CSS Variables 那会发现所有支流浏览器都反对 CSS 变量。无论是在挪动设施还是 PC 上。

当初，让咱们看看这些 CSS 变量的理论作用。

示例 1 - 治理色彩

应用 CSS 变量的最佳抉择之一就是设计的色彩。不用一遍又一遍地复制和粘贴雷同的色彩，咱们只需将它们放在变量中即可。

如果有该死的产品要咱们更新特定的绿色暗影或将所有按钮设置为红色而不是蓝色，则只需更改该 CSS 变量的值即可。咱们无需搜寻并替换所有呈现的该色彩。

入手试试：https://codesandbox.io/s/8kky…

示例 2 - 删除反复的代码

通常咱们须要构建一些组件的不同变体。雷同的根本款式，只是性能略有不同。咱们举例应用一个带有不同色彩按钮的案例。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {border-color: red}
.btn.red:hover {background: red}

像这样应用它们：

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

然而，这会减少一些代码反复。在 .red 类中，咱们必须将边框色彩和背景都设置为红色。万一哪天须要更改色彩，那就很麻烦了，须要一个一个的改。这个问题能够通过 CSS 变量轻松解决。

.btn {border: 2px solid var(--color, black);
}
.btn:hover {background: var(--color, black);
}
.btn.red {--color: red}

入手试试：https://codesandbox.io/s/yp29…

示例 3 - 使某些属性易于浏览

如果咱们想为更简单的属性值创立快捷方式，那么 CSS 变量十分有用，这样咱们就不用记住它了。

CSS 属性，如 box-shadow、transform 和font或其余具备多个参数的 CSS 规定就是很好的例子。

咱们能够将属性放在一个变量中，这样咱们就能够通过更易于浏览的格局重用它。

// 次要代码
:root {--tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {box-shadow: var(--tiny-shadow);
}
li:hover {transform: var(--animate-right);
}

入手试试：https://codesandbox.io/s/q3ww…

示例 4 - 级联变量

规范级联规定也实用于 CSS 变量。如果一个自定义属性被申明屡次，css 文件中最上面的定义将笼罩它下面的定义。

上面的示例演示了在用户操作上动静操作属性是如许容易，同时也放弃代码的清晰和简洁。

// 次要代码
.orange-container {--main-text: 18px;}
.orange-container:hover {--main-text: 22px;}
.red-container:hover {--main-text: 26px;}
.title {font-size: var(--title-text);
}
.content {font-size: var(--main-text);
}

.container:hover {--main-text: 18px;}

入手试试：https://codesandbox.io/s/xj0q…

示例 5 - 主题切换与 CSS 变量

CSS 变量的一大长处是它们的响应个性。一旦咱们更新它们，具备 CSS 变量值的任何属性也会被更新。因而，仅需应用几行 Javascript 并奇妙地应用 CSS 变量，便能够创立主题切换器机制。

入手试试：https://codesandbox.io/s/24j4…

扩大

就像 CSS 中简直所有货色一样，变量也非常简单易用。以下是一些未蕴含在示例中的技巧，但在某些状况下依然十分有用：

留神大写，CSS 变量辨别大小写

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

当咱们应用 var() 函数时，还能够传入第二个参数。如果找不到自定义属性，则将应用此值：

width: var(--custom-width, 33%);

能够将 CSS 变量间接用于 HTML

<!--HTML-->
<html style="--size: 600px">
body {max-width: var(--size)
}

能够在其余 CSS 变量中应用 CSS 变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

能够通过媒体查问将 CSS 变量作为条件。例如，以下代码依据屏幕大小更改 padding 的值：

:root {--padding: 15px}

@media screen and (min-width: 750px) {--padding: 30px}

在 calc() 函数中也能够应用 CSS 变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。它们不会解决咱们在 CSS 畛域中遇到的所有问题。然而，它能够让咱们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。只需将所有常量设置在一个独自的文件中，当咱们只想对变量进行更改时，就不用跳过数千行代码。

~ 完，我是小智，Spa 去了，记得点个赞反对一下油。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：http://www.js-craft.io/blog/1…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版