作者：Ahmad shaded
译者：前端小智
起源：sitepoint
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
有些状况下，我须要用一种简略的办法来创立网格布局。 例如，每次我扭转主见时，在不批改CSS的状况下疾速画出五列网格。 在本文中，咱们一起摸索一些用例，并思考如果实现及应用它们。
它是怎么工作的
在深入探讨这些概念之前，首先咱们来回顾一下 CSS 变量的基础知识， 咱们也能够将它称为“自定义属性”。
所有支流浏览器都反对CSS变量，上面是各个浏览器的反对状况：
如果要定义CSS变量是全局变量，则须要将其增加到:root申明中（:root等效于<html>）。 如果该变量特定于组件，则能够在该组内申明中定义它。
在上面的例子中，我定义了一个全局变量--size，它用于square 元素的宽度和高度。
:root { --size: 50px;}.square { width: var(--size); height: var(--size);}如果--size没有定义，要怎么办呢?在传递的变量有效的状况下，CSS 反对定义默认变量或回退变量。
在上面的例子中的 var(--size, 10px)。如果--size有效，则宽度和高度值将为 10px。
.square { width: var(--size, 10px); height: var(--size, 10px);}除此之外，还能够在内联CSS款式中应用CSS变量。例如
HTML
<div class="elem" style="--background: red;"></div>CSS
.elem { background: var(--background);}接着， 咱们以上述这些概念，还演示一些事例。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
CSS网格示例
侧边栏和主内容
在此设计中，我将CSS网格用于以下各项：
- 边栏和主菜单
- 表单项
- 三列布局
侧边栏的宽度是固定的，主内容是变动。假如侧边栏的宽度是240px。
1.边栏和主菜单
Html
<div class="o-grid" style="--columns: 240px 1fr"> <aside></aside> <main></main></div>Html
.o-grid { display: grid; grid-template-columns: var(--columns);}2. 表单项
依照设计，每行有两列，html 构造如下：
Html
<div class="o-grid" style="--columns: 1fr 1fr"> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"></div></div>CSS
.o-grid { display: grid; grid-template-columns: var(--columns);}3. 三列布局
在上面的示例中，我增加了--repeat-number：3和--gap：8px作为内联CSS。 这些变量将增加到o-grid类，网格的设置将基于这些变量。
HTML
<div class="o-grid" style="--repeat-number: 3; --gap: 8px;"> <div></div> <div></div> <div></div></div>CSS
.o-grid { display: grid; grid-template-columns: repeat(var(--repeat-number), 1fr); grid-gap: var(--gap, 0);}我喜爱在CSS变量中增加默认值，以防变量没有被设置。在下面的代码中，我应用了var(--gap, 0)，如果使用者没有提供--gap变量，则其默认值将为0。
动静网格项：minmax
对我来说，这是一个宽泛应用的用例，并且十分重要。我常常应用Grid minmax，然而当我在多个页面上应用它时，我遇到了一个问题。
让咱们举一个不应用 CSS 变量的根本示例。
在 CSS 中，我应用minmax为每个网格我的项目定义最小宽度250px。
CSS
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); grid-gap: 16px;}当初，如果设计要求网格我的项目的宽度至多为300px，应该怎么做？ 我须要创立相似以下版本吗？
.o-grid--2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));}设想一下，有五个不同的网格，每个网格具备不同的我的项目宽度，所以以上不是正确的解决方案。
应用CSS变量，我能够执行以下操作
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); grid-gap: var(--gap);}在HTML中，就能够在标签上设置 CSS 变量：
<!-- Example 1 --><div class="o-grid" style="--item-width: 250px;"> <div></div> <div></div> <div></div></div><!-- Example 2 --><div class="o-grid" style="--item-width: 350px;"> <div></div> <div></div> <div></div></div><!-- Example 3 --><div class="o-grid" style="--item-width: 150px;"> <div></div> <div></div> <div></div></div>事例源码：https://codepen.io/shadeed/pe...
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
Flexbox示例
在示例中，有一个文章题目，其中蕴含作者姓名和标签。 这些在页面中的排布形式是动态变化，所以须要一种疾速切换这些布局形式的办法 。
HTML
<div class="article-header"> <h2>Article title</h2> <div class="article-header__meta" style="--justify: space-between;"> <p>By Ahmad Shadeed</p> <p>Published under: CSS, Design</p> </div></div>CSS
.article-header__meta { display: flex; justify-content: var(--justify);}有了它，我能够调整内联款式以将值更改为另一个关键字。 我发现这在进行疾速原型制作甚至是制作网站时很有用。
按钮
按钮宽度
CSS 变量也实用于按钮元素。 假如有一个带有两个input字段和一个按钮的表单。
我的目标是通过应用内联CSS变量来管制按钮的宽度。 有时，按钮应占据其父控件的100%宽度。
html
<button class="c-button" style="--width: 100%;">Submit</button>css
.c-button { /* Other styles */ width: var(--width, initial);}按钮色彩
另一个有用的用处是当有重影按钮（轮廓按钮）时。 按钮的色彩能够是任何色彩，通过应用CSS变量，能够轻松更改色彩。
HTML
<button class="c-button c-button--ghost" style="--color: #5e35b1;">Save Edits</button><button class="c-button c-button--ghost" style="--color: #ec2828;">Delete</button>CSS
.c-button--ghost { /* Other styles */ background: transparent; color: var(--color, #000); border-color: currentColor;}CSS 变量同样适宜悬停成果。悬停时，按钮背景将变为纯色，并且字体色彩为红色。
事例源码：https://codepen.io/shadeed/pe...
用户头像
每个角色的大小都不同，这非常适合用 CSS 变量来解决。假如有四个不同大小的用户头像。
在CSS中，定义了以下款式：
.c-avatar { display: inline-block; margin-right: 2rem; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px); object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px 0 rgba(#000, 0.2);}通过应用Calc()函数，我能够传递一个--size 变量，它将乘以一个根本宽度值，在HTML中定义 --size变量：
<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">事例源码：https://codepen.io/shadeed/pe...
原文：https://css-tricks.com/patter...
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。