微信搜索【伟大的走向世界】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。随着Web应用程序变得越来越大，CSS也变得越来越大、冗长和混乱。在良好的上下文中使用CSS变量为我们提供了一种重用和轻松更改重复出现的CSS属性的机制。在纯CSS支持变量之前，我们有像Less和Sass这样的预处理器。但是它们需要在使用前进行编译，因此（有时）增加了一层额外的复杂性。如何定义和使用CSS变量（也称为自定义属性）声明一个简单的JS变量，很简单，如下：letmyColor="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变量的支持一点也不差。如果您查看CanIUseCSSVariables，您会发现所有主流浏览器都支持CSS变量。无论是手机端还是PC端。现在，让我们看看这些CSS变量实际上做了什么。示例1-管理颜色使用CSS变量的最佳选择之一是设计的颜色。无需一遍又一遍地复制和粘贴相同的颜色，我们可以将它们放入变量中。如果有一个该死的产品希望我们更新特定的绿色阴影或将所有按钮变成红色而不是蓝色，我们需要做的就是更改该CSS变量的值。我们不需要搜索和替换该颜色的所有匹配项。自己尝试一下：https://codesandbox.io/s/8kky...示例2-删除重复代码通常我们需要构建某些组件的不同变体。相同的基本样式，只是功能略有不同。让我们以带有不同颜色按钮的案例为例。.btn{边框：2px纯黑色；//这里有更多道具}.btn:hover{background:black;//这里有更多道具}.btn.red{border-color:red}.btn.red:hover{background:red}像这样使用它们：HelloHello但是，这增加了一些代码重复。在.red类中，我们必须将边框颜色和背景都设置为红色。万一哪天要换颜色，就很麻烦，需要一个一个换。使用CSS变量可以很容易地解决这个问题。.btn{border:2pxsolidvar(--color,black);}.btn:hover{background:var(--color,black);}.btn.red{--color:red}自己试试：https://codesandbox.io/s/yp29...Example3-使一些属性易于阅读如果我们想为更复杂的属性值创建快捷方式这样我们就不必记住它，CSS变量很有用。CSS属性，例如box-shadow、transform和font或其他具有多个参数的CSS规则就是很好的例子。我们可以将属性放在一个变量中，这样我们就可以以更易于阅读的格式重用它。//主要代码：root{--tiny-shadow:4px4px2px0rgba(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-Cascade变量标准级联规则也适用于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和--COLOR是两个不同的变量*/我们在使用var()函数的时候，也可以传入第二个参数。如果未找到自定义属性，将使用此值：width:var(--custom-width,33%);HTML中可以直接使用CSS变量body{max-width:var(--size)}CSS变量可以在其他CSS变量中使用:--base-red-color:#f00;--background-gradient:linear-gradient(totop,var(--base-red-color),#222);CSS变量可以用作媒体查询的条件。例如，下面的代码根据屏幕大小改变padding的值：:root{--padding:15px}@mediascreenand(min-width:750px){--padding:30px}也可以使用CSS变量在calc()函数中。--text-input-width:5000px;max-width:calc(var(--text-input-width)/2);CSS变量不是万灵药。它们不会解决我们在CSS世界中遇到的所有问题。但是，它可以使我们的代码更具可读性和可维护性。此外，它们还大大增加了跨大型文档进行更改的便利性。只需将所有常量设置在一个单独的文件中，就可以让我们在只想更改变量时不必跳过数千行代码。~完了，我是小智，去spa了，记得点赞养油哦。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：http://www.js-craft.io/blog/1...交流有梦想，有干货，微信搜索【大招天下】关注这位还在洗碗的洗碗大智慧清晨。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
