作者：Daniel
译者：前端小智
起源：stackabuse
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 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... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。