有些情况下,我需要用一种简单的方法来创建网格布局。例如,每次我改变主意时,在不修改CSS的情况下快速画出五列网格。在本文中,我们一起探索一些用例,并思考如果实现及使用它们。
它是怎么工作的
在深入探讨这些概念之前,首先我们来回顾一下 CSS 变量的基础知识, 我们也可以将它称为“自定义属性”。
所有主流浏览器都支持CSS变量,下面是各个浏览器的支持情况:
![58bb580b3f2283e02fc5d45092cbf08f.png](https://i-blog.csdnimg.cn/blog_migrate/a1a8dacb580679cee1575a83f2e3e1ae.png)
如果要定义CSS变量是全局变量,则需要将其添加到:root
声明中(:root
等效于)。如果该变量特定于组件,则可以在该组内声明中定义它。
在下面的例子中,我定义了一个全局变量--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
"elem" style="--background: red;">
CSS
.elem {
background: var(--background);
}
接着, 我们以上述这些概念,还演示一些事例。
CSS网格示例
侧边栏和主内容
![b3da306596c2514a347ab25861fffcd7.png](https://i-blog.csdnimg.cn/blog_migrate/d29f5619e1c0b2fda4d7bc30200886de.png)
在此设计中,我将CSS网格用于以下各项:
- 边栏和主菜单
- 表单项
- 三列布局
侧边栏的宽度是固定的,主内容是变化。假设侧边栏的宽度是240px
。
1.边栏和主菜单
Html
"o-grid" style="--columns: 240px 1fr">
Html
.o-grid {
display: grid;
grid-template-columns: var(--columns);
}
2. 表单项
按照设计,每行有两列,html 结构如下:
Html
"o-grid" style="--columns: 1fr 1fr">
"form-group">
"form-group">
"form-group">
"form-group">
CSS
.o-grid {
display: grid;
grid-template-columns: var(--columns);
}
3. 三列布局
在下面的示例中,我添加了--repeat-number:3
和--gap:8px
作为内联CSS。这些变量将添加到o-grid
类,网格的设置将基于这些变量。
HTML
"o-grid" style="--repeat-number: 3; --gap: 8px;">
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 变量的基本示例。
![aa9acaa11c07eb077e0b8cefa85c76c1.png](https://i-blog.csdnimg.cn/blog_migrate/978f90979ec5967a659f6fb1422e99e2.png)
在 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 变量:
"o-grid" style="--item-width: 250px;">
"o-grid" style="--item-width: 350px;">
"o-grid" style="--item-width: 150px;">
事例源码:https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4
Flexbox示例
在示例中,有一个文章标题,其中包含作者姓名和标签。这些在页面中的排布方式是动态变化,所以需要一种快速切换这些布局方式的方法 。
HTML
"article-header">
Article title
Article title
"article-header__meta" style="--justify: space-between;">
By Ahmad Shadeed
Published under: CSS, Design
CSS
.article-header__meta {
display: flex;
justify-content: var(--justify);
}
有了它,我可以调整内联样式以将值更改为另一个关键字。我发现这在进行快速原型制作甚至是制作网站时很有用。
按钮
按钮宽度
CSS 变量也适用于按钮元素。假设有一个带有两个input
字段和一个按钮的表单。
![d27a13b833a62db31b1b9e4ce1b10ff3.png](https://i-blog.csdnimg.cn/blog_migrate/bf18cc8be5ad38453b41d0be06590063.png)
我的目的是通过使用内联CSS变量来控制按钮的宽度。有时,按钮应占据其父控件的100%
宽度。
html
"c-button" style="--width: 100%;">Submit
css
.c-button {
/* Other styles */
width: var(--width, initial);
}
![dbd72a49151a812e61cff384d919553a.png](https://i-blog.csdnimg.cn/blog_migrate/0208d0da0172488ce12ae62a49594f50.png)
按钮颜色
另一个有用的用途是当有重影按钮(轮廓按钮)时。按钮的颜色可以是任何颜色,通过使用CSS变量,可以轻松更改颜色。
HTML
"c-button c-button--ghost" style="--color: #5e35b1;">Save Edits
"c-button c-button--ghost" style="--color: #ec2828;">Delete
CSS
.c-button--ghost {
/* Other styles */
background: transparent;
color: var(--color, #000);
border-color: currentColor;
}
![9c519a464fd95c9aab3d8f38064f56f8.png](https://i-blog.csdnimg.cn/blog_migrate/de5c6e04d19c850854d5e2e509c6cf0f.png)
CSS 变量同样适合悬停效果。悬停时,按钮背景将变为纯色,并且字体颜色为白色。
事例源码:https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995
用户头像
每个角色的大小都不同,这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。
![7070a466c7c1e562279ed2887c3bdae1.png](https://i-blog.csdnimg.cn/blog_migrate/36de5b06eea51f43e445fcf02f6fedac.png)
在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
变量:
"user.jpg" alt="" class="c-avatar" style="--size: 1">
"user.jpg" alt="" class="c-avatar" style="--size: 2">
"user.jpg" alt="" class="c-avatar" style="--size: 3">
"user.jpg" alt="" class="c-avatar" style="--size: 4">
事例源码:https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d
人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
作者:Ahmad shaded 译者:前端小智 来源:sitepoint
原文:https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
相关热门推荐ES6 中 module 备忘清单,你可能知道 module 还可以这样用!很多人不知道可以使用这种 key 的方式来对 Vue 组件进行重新渲染!前端如何提高用户体验:增强可点击区域的大小周末学会了 10个超级实用 Javascript 技巧!CSS Viewport 单位,很多人还不知道使用它来快速布局!30 个纯 HTML5 实现的游戏很多人不知道 v-for 可以这样解构小智最近在学习正则,学习过程中发现这 6 个方便的正则表达式详解 ES10 中 Object.fromEntries() 的缘起有哪些被低估未被广泛使用的有用的 HTML标签?