作者：AhmadShadeed译者：前端小智来源：ishadeed有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。近四年来，Web浏览器一直支持CSS变量（又名自定义属性）。我一般也是根据项目情况来使用的。它们非常有用且易于使用，但它们经常被前端开发人员误用或误解。简介CSS变量是在CSS文档中定义的值，目的是为了可重用性和减少CSS值中的冗余。下面是一个基本的例子。.section{border:2pxsolid#235ad1;}.section-title{color:#235ad1;}.section-title::before{content:"";显示：内联块；宽度：20px；高度：20px；background-color:#235ad1;}在此代码段中，#235ad1使用了3次。想象一下，对于一个大型项目，不同的CSS文件，如果有一天他们被要求更改颜色。我们能做到的最好和最快的方法是“查找和替换”。使用CSS变量，可以更快地解决这个问题。要定义变量名，您需要以--开头。首先，我们现在将在:root或元素中定义变量。:root{--color-primary:#235ad1;}.section{border:2pxsolidvar(--color-primary);}.section-title{color:var(--color-primary);}.section-title::before{/*其他样式*/background-color:var(--color-primary);}是不是比上一个干净多了？--color-primary变量是全局变量，因为我们在:root元素中定义了它。但是，我们也可以将变量范围限定为整个文档中的某些元素。命名变量类似于编程语言命名变量，CSS变量的有效名称应包含字母数字字符、下划线和破折号。另外，值得一提的是CSS变量是区分大小写的。/*法定名称*/:root{--primary-color:#222;--_原色：#222；--12-原色：#222；--primary-color-12:#222;}/*非法命名*/:root{--primarycolor:#222;/*Spacingsarenotallowed*/--primary$%#%$#}ScopeCSS变量也有自己的作用域，这个概念和其他编程语言类似。以JS为例::root{--primary-color:#235ad1;}.section-title{--primary-color:d12374;color:var(--primary-color);}可变元素是全局的，因此可以在cool()函数内部访问。但是，只能在cool()函数中访问变量otherElement。:root{--primary-color:#235ad1;}.section-title{--primary-color:d12374;color:var(--primary-color);}变量--primary-color是一个全局变量，可以从文档中的任何地方访问。变量--primary-color只能在.section-title中访问，因为它是在.section-title中定义的。下面是一个更直观的示例图，可以加强我们的理解：变量--primary-color用于标题颜色。我们想自定义作者姓名和最新文章标题的颜色，所以我们需要重写--primary-color。这同样适用于--unit变量。/*全局变量*/:root{--primary-color:#235ad1;--unit:1rem;}/*section-title默认颜色和间距*/.section-title{color:var(--primary-color);margin-bottom:var(--unit);}/*覆盖章节标题样式*/.featured-authors.section-title{--primary-color:#d16823;}.latest-articles.section-title{--原色：#d12374；--unit:2rem;}Fallbackscheme这里的fallback并不是不支持CSS变量的fallback，而是CSS变量可以支持的fallbackscheme。考虑以下示例：.section-title{color:var(--primary-color,#222);}注意var()有多个值。第二个#221仅在变量--primary-color由于某种原因未定义时才有效。不仅如此，我们还可以将var()嵌套在另一个var()中。.section-title{color:var(--primary-color,var(--black,#222));}此功能在变量值取决于操作的情况下很有用。当变量没有值时，为变量提供回退很重要。用例一：控制组件的大小在设计系统中，按钮通常有多种尺寸。通常，按钮可以具有三种尺寸（小、正常、大）。使用CSS变量并不容易：.button{--unit:1rem;padding:var(--unit);}.button--small{--unit:0.5rem;}.button--large{--unit:1.5rem;}通过更改按钮组件范围内的变量--unit，我们创建按钮的不同变体。用例二：CSS变量和HSL颜色HSL代表色调、饱和度、亮度。Hue的值决定颜色，Saturation和Lightness的值可以控制颜色的深浅。:root{--primary-h:221;--primary-s:71%;--primary-b:48%;}.button{background-color:hsl(var(--primary-h),var(--primary-s),var(--primary-b));transition:background-color0.3sease-out;}/*使背景更暗*/.button:hover{--primary-b:33%;}这里Ho通过减小变量--primary-b使按钮变暗。用例三：比例调整如果您使用过Photoshop、Sketch、Figma或Adob??eXD等设计程序，那么我们需要在调整元素大小时按住Shift键以避免扭曲它。在CSS中，没有直接的方法可以做到这一点，但我们有一个简单的解决方法，即使用CSS变量。假设有一个图标，它的宽度和高度应该相等。我为宽度和高度定义了变量--size。.icon{--size:22px;宽度：var(--size)；height:var(--size);}现在您可以通过简单地更改--size变量的值来模拟Shift调整大小的效果。用例四：CSS网格CSS变量对于网格非常有用。假设您希望网格容器根据定义的首选宽度显示其子项。使用变量比为每个变体创建类并复制CSS更容易做到这一点。.wrapper{--item-width:300px;显示：网格；网格模板列：重复（自动填充，minmax（var（--item-width），1fr））；网格间隙：1rem；}。wrapper-2{--item-width:500px;这样，我们就可以创建一个完整的、灵活的、易于维护的、可以在其他项目中使用的网格系统。相同的概念可以应用于grid-gap属性。包装器{--item-width:300px;--差距：0；显示：网格；grid-template-columns:repeat(auto-fill,minmax(var(--item-width),1fr));}.wrapper.gap-1{--gap:16px;}用例五：全值声明,CSS渐变是用全值表示的，比如像渐变这样的东西。如果渐变或背景在整个系统中使用，将它们存储到CSS变量中可能是一件好事。:root{--primary-gradient:linear-gradient(150deg,#235ad1,#23d1a8);}.element{background-image:var(--primary-gradient);}或者我们可以存储一个值。以角度为例：.element{--angle:150deg;background-image:linear-gradient(var(--angle),#235ad1,#23d1a8);}.element.inverted{--angle:-150deg;}用例六：背景位置我们可以在其中包含多个值一个CSS变量，当我们需要根据特定上下文将元素放置在不同位置时，它很有用。.table{--size:50px;--pos:左中；背景：#ccc线性梯度（#000，#000）不重复；背景大小：var(--size)var(--size);background-position:var(--pos);}用例七：在浅色和深色模式之间切换现在，网站比以往任何时候都更需要深色和浅色模式。使用CSS变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。：根{--文本颜色：#434343；--边框颜色：#d2d2d2；--main-bg-color:#fff;--action-bg-color:#f9f7f7;}/*添加到``元素的类*/.dark-mode{--text-color:#e9e9e9;--边框颜色：#434343；--main-bg-颜色：#434343；--action-bg-color:#363636;}用例八：设置默认值在某些情况下，您需要使用JavaScript设置CSS变量。假设我们需要获取可扩展组件的高度。变量--details-height-open为空，它将被添加到特定的HTML元素中。当JavaScript由于某种原因失败时，提供适当的默认值或回退值很重要。.section.is-active{max-height:var(--details-height-open,auto);}auto值是JS失败时的回退值，没有定义CSS变量--details-height-open。用例九：控制包装器的宽度网站包装器有多种变体。有时需要一页小包，另一页大包。在这种情况下，合并CSS变量可能会有用。.wrapper{--size:1140px;max-width:var(--size);}.wrapper--small{--size:800px;}用例十一：动态网格项我们可以添加--item-width变量，仅此而已。例如，这种方法可以帮助制作网格原型。HTML
