作者： Ahmad Shadeed
译者：前端小智
起源：ishadeed
点赞再看，养成习惯本文
GitHubhttps://github.com/qq44924588... 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送Star和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
CSS变量（又名自定义属性）已在Web浏览器中反对了近四年。 我个别也会依据我的项目状况应用它们。 它们十分有用且易于应用，然而前端开发人员通常可能会误用或误会它们。
简介
CSS变量是在CSS文档中定义的值，其目标是可重用性并缩小CSS值中的冗余。 上面是一个根本示例。
.section { border: 2px solid #235ad1;}.section-title { color: #235ad1;}.section-title::before { content: ""; display: inline-block; width: 20px; height: 20px; background-color: #235ad1;}在此代码段中，#235ad1应用了3次。 设想一下，对于一个大型项目，不同的CSS文件，如果哪天被要求更改色彩。 咱们能够做的最好快的形式就是“查找并替换”。
应用CSS变量，能够更快解决这个问题。 定义变量名须要用--结尾。 首先，咱们当初将在:root或<html>元素中定义变量。
:root { --color-primary: #235ad1;}.section { border: 2px solid var(--color-primary);}.section-title { color: var(--color-primary);}.section-title::before { /* Other styles */ background-color: var(--color-primary);}是不是比后面的洁净得多？ --color-primary变量是全局变量，因为咱们在:root元素中定义了它。 然而，咱们还能够将变量范畴限定到整个文档中的某些元素。
命名变量
与编程语言命名变量类似，CSS 变量的无效命名应蕴含字母数字字符，下划线和破折号。 另外，值得一提的是 CSS 变量辨别大小写。
/* 非法命名 */:root { --primary-color: #222; --_primary-color: #222; --12-primary-color: #222; --primay-color-12: #222;}/* 非法命名 */:root { --primary color: #222; /* Spacings are not allowed */ --primary$%#%$#}作用域
CSS 变量也有本人的作用域，这个概念相似于其余编程语言。 以 JS 为例:
:root { --primary-color: #235ad1;}.section-title { --primary-color: d12374; color: var(--primary-color);}变量element是全局的，因而能够在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);}/* 笼罩 section-title 款式 */.featured-authors .section-title { --primary-color: #d16823;}.latest-articles .section-title { --primary-color: #d12374; --unit: 2rem;}回退计划
这里的回退不是不反对 CSS 变量的回退，而是 CSS 变量能够反对回退计划。思考以下示例：
.section-title { color: var(--primary-color, #222);}留神，var()有多个值。第二个#221只在变量--primary-color因为某种原因没有定义的状况下无效。不仅如此，咱们还能够将var()嵌套到另一个var()中。
.section-title { color: var(--primary-color, var(--black, #222));}在变量值依赖于某个动作的状况下，该个性十分有用。当变量没有值时，为它提供一个回退很重要。
用例一：管制组件的大小
在设计零碎中，按钮通常有多种尺寸。 通常，按钮能够具备三种尺寸（Small, normal, large）。 应用 CSS 变量来实现它并不容易：
.button { --unit: 1rem; padding: var(--unit);}.button--small { --unit: 0.5rem;}.button--large { --unit: 1.5rem;}通过在按钮组件作用域内更改变量--unit，咱们创立了按钮的不同变体。
用例二：CSS 变量和 HSL 色彩
HSL代表色调，饱和度，亮度。色相的值决定了色彩，饱和度和亮度值能够管制色彩的深浅。
: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-color 0.3s ease-out;}/* 使背景更暗 */.button:hover { --primary-b: 33%;}这里何通过减小变量--primary-b使按钮变暗。
用例三：比例调整
如果您应用过Photoshop，Sketch，Figma或Adobe XD之类的设计程序，那么咱们会想在调整元素大小的同时按住Shift键以防止扭曲它。
在CSS中，没有间接的办法来做到这一点，然而咱们有一个简略的解决办法，应用CSS变量。
假如有一个图标，并且其宽度和高度应该相等。 我定义了变量--size，用于宽度和高度。
.icon { --size: 22px; width: var(--size); height: var(--size);}当初，您只需更改--size变量的值即可模仿Shift调整大小的成果。
用例四：CSS Grid
CSS 变量对于网格十分有用。 假如心愿网格容器依据定义的首选宽度显示其子项。 与为每个变体创立类并复制CSS相比，应用变量更容易做到这一点。
.wrapper { --item-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-gap: 1rem;}.wrapper-2 { --item-width: 500px;这样，咱们能够创立一个残缺的网格零碎，该零碎灵便，易于保护，并且能够在其余我的项目中应用。 能够将雷同的概念利用于grid-gap属性。
wrapper { --item-width: 300px; --gap: 0; display: grid; 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;}用例六： Background Position
咱们能够在 CSS 变量中蕴含多个值，这在须要依据特定上下文将元素搁置在不同地位的状况下很有用。
.table { --size: 50px; --pos: left center; background: #ccc linear-gradient(#000, #000) no-repeat; background-size: var(--size) var(--size); background-position: var(--pos);}用例七： 在明暗模式之间切换
当初，网站比以往任何时候都更须要深色和浅色模式。 应用CSS变量，咱们能够存储它们的两个版本，并依据用户或零碎偏好在它们之间切换。
:root { --text-color: #434343; --border-color: #d2d2d2; --main-bg-color: #fff; --action-bg-color: #f9f7f7;}/* 增加到`<html>`元素的类*/.dark-mode { --text-color: #e9e9e9; --border-color: #434343; --main-bg-color: #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。
用例九： 管制 wrapper 宽度
网站wrapper 能够有多种变动。有时候是须要一个小包装一个页面，一个大包装另一个页面。在这种状况下，合并CSS变量可能是有用的。
.wrapper { --size: 1140px; max-width: var(--size);}.wrapper--small { --size: 800px;}用例十一： 动静网格我的项目
咱们能够在style属性中增加--item-width变量，仅此而已。 例如，这种办法能够帮忙建设网格原型。
HTML
<div class="wrapper" style="--item-width: 250px;"> <div></div> <div></div> <div></div></div>CSS
.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-gap: 1rem;}事例：https://codepen.io/shadeed/pe...
用例十二： 用户头像
另一个有用的用例是大小调整元素。 假如咱们须要四种不同大小的用户头像，并且只能应用一个变量来管制其大小。
<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" /><img src="user.jpg" alt="" class="c-avatar" style="--size: 2" /><img src="user.jpg" alt="" class="c-avatar" style="--size: 3" /><img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />.c-avatar { display: inline-block; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px);}用例十三： 媒体查问
组合CSS变量和媒体查问对于调整整个网站中应用的变量十分有用。 我能想到的最简略的示例是更改间距值。
:root { --gutter: 8px;}@media (min-width: 800px) { :root { --gutter: 16px; }}应用--gutter变量的任何元素都将依据视口大小更改其间距，这是不是很棒吗？
用例十四：继承
是的，CSS变量的确继承。如果父元素中定义了CSS变量，那么子元素将继承雷同的CSS变量。咱们看上面的例子：
HTML
<div class="parent"> <p class="child"></p></div>css
.parent { --size: 20px;}.child { font-size: var(--size);}.child元素能够拜访变量--size，因为它从父元素继承了它。很乏味,那它在理论的我的项目中有啥用呢？
咱们有一组以下需要的操作项
- 扭转一个变量就能够扭转所有项的大小
- 间距应该是动静的
HTML
<div class="actions"> <div class="actions__item"></div> <div class="actions__item"></div> <div class="actions__item"></div></div>CSS
.actions { --size: 50px; display: flex; gap: calc(var(--size) / 5);}.actions--m { --size: 70px;}.actions__item { width: var(--size); height: var(--size);}请留神，这里是如何将变量--size用于flexbox gap属性的。 这意味着间距能够是动静的，并且取决于--size变量。
另一个有用的例子是应用CSS变量继承来定制CSS动画：
@keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); }}.walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate;}.run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate;}这样，咱们就不须要定义@keyframes两次，它将继承.walk和.run元素的定制CSS 变量。
CSS 变量的工作形式
当var()函数中的CSS变量有效时，浏览器将依据所应用的属性用初始值或继承值替换。
:root { --main-color: 16px;}.section-title { color: var(--main-color);}我应用16px是color属性的值。 这是齐全谬误的。 因为color属性是继承的，因而浏览器将执行以下操作：
该属性是否可继承？
如果是，父节点是否领有该属性?
- 是的，继承该值
- 否:设置为初始值
- 否:设置为初始值
上面解释浏览器工作的流程图。
网址值
咱们可能无法控制网页中的所有资源，其中一些必须在线托管。 在这种状况下，您能够将链接的URL值存储在CSS变量中。
:root { --main-bg: url("https://example.com/cool-image.jpg");}.section { background: var(--main-bg);}然而，能想晓得是否能够应用url()插入 CSS 变量。 思考以下
:root { --main-bg: "https://example.com/cool-image.jpg";}.section { background: url(var(--main-bg));}因为var(--main-bg)被视为url自身，因而有效。 当浏览器计算出该值时，该值将不再无效，并且将无奈按预期运行。
存储多个值
CSS 变量也能够示意多个值，看上面的例子：
:root { --main-color: 35, 90, 209;}.section-title { color: rgba(var(--main-color), 0.75);}在示例中，咱们有一个rgba()函数，并且RGB值存储在CSS变量中，以逗号分隔。 如果咱们想依据元素调整alpha值，这样做能够提供灵活性。惟一的毛病是无奈应用DevTools色彩选择器来调整rgba值。
另一个例子是将它与background属性一起应用。
:root { --bg: linear-gradient(#000, #000) center/50px;}.section { background: var(--bg);}.section--unique { background: var(--bg) no-repeat;}@keyframes规定中的动画变量
如果你浏览过CSS变量标准，则可能会读到“动画净化”一词。 这个想法是，在@keyframes规定中应用CSS变量时，无奈对其进行动画解决。
html
<div class="box"></div>CSS
.box { width: 50px; height: 50px; background: #222; --offset: 0; transform: translateX(var(--offset)); animation: moveBox 1s infinite alternate;}@keyframes moveBox { 0% { --offset: 0; } 50% { --offset: 50px; } 100% { --offset: 100px; }}动画无奈顺利进行。 它将仅对值 (0, 50px, 100px)进行动画解决。 依据CSS标准：
@keyframes规定中应用的任何自定义属性都会受到动画净化，这将影响通过动画属性中的var()函数援用它时如何解决它。
如果咱们心愿上述动画可能失常工作，则应采纳老式的办法。 这意味着，咱们须要用要设置动画的理论CSS属性替换变量。
@keyframes moveBox { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(100px); }}计算
你可能不晓得能够应用 CSS 变量进行计算。 思考上面示例：
.c-avatar { display: inline-block; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px);}.c-avatar 大小会有不同的变动。 我将默认值设置为1，所以默认大小为(30px * 30px)。 留神不同的类变动以及更改--size值如何导致化身的大小变动。
.c-avatar--small { --size: 2;}.c-avatar--medium { --size: 3;}.c-avatar--large { --size: 4;}Devtools和CSS变量
咱们能够在浏览器DevTools中应用一些有用的技巧，这样就能更轻松地应用CSS变量。
看到色彩
应用CSS变量时，看到色彩或背景值的视觉指示器是否有用？ Chrome和Edge证实了这一点。
计算值
要查看CSS变量的计算值，只有将鼠标悬停或单击即可。
禁用CSS变量
当咱们须要从应用CSS变量的所有元素中禁用CSS变量时，能够通过从定义它的元素中勾销选中它来实现。 参见下图：
本文介绍了 CSS 变量的很多内容，心愿能对你有些帮忙，二创不易，还望点个赞+转发。
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://ishadeed.com/article/...
交换
文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。