当前位置：首页 > Web前端 > HTML

使用内联CSS变量技巧来提高智能布局的效率！

时间：2023-04-02 15:30:59 HTML

作者：Ahmadshaded译者：前端小智来源：Sitepoint点赞再看，微信搜索【大千世界】关注这个没有大厂背景，但心态积极的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。在某些情况下，我需要一种简单的方法来创建网格布局。例如，每次改变主意时，无需修改CSS即可快速绘制一个五列网格。在本文中，让我们一起探索一些用例，并考虑如何实现和使用它们。它是如何工作的在深入了解这些概念之前，让我们首先回顾一下CSS变量的基础知识，我们也可以将其称为“自定义属性”。所有主流浏览器都支持CSS变量。以下是各个浏览器的支持情况：如果要将CSS变量定义为全局变量，需要在:root声明中加上（:root等同于）。如果变量特定于组件，则可以在组声明中定义它。在下面的示例中，我定义了一个全局变量--size用于方形元素的宽度和高度。:root{--size:50px;}.square{宽度:var(--size);height:var(--size);}如果没有定义--size怎么办？传递的变量无效CSS支持在下例中的var(--size,10px)情况下定义默认或后备变量。如果--size无效，宽度和高度值将是10px。.square{width:var(--size,10px);height:var(--size,10px);}除此之外，CSS变量也可以在内联CSS样式中使用。例如HTML

CSS.elem{background:var(--background);}接下来，我们将根据以上概念。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。CSSGrid示例边栏和主要内容在此设计中，我将CSSGrid用于以下内容：边栏和主菜单表单项三列布局边栏宽度是固定的，主要内容是可变的。假设侧边栏的宽度为240px。1.侧边栏和主菜单Html

Html.o-grid{显示：网格；grid-template-columns:var(--columns);}2.表单项设计，每行两列，html结构如下：Html

CSS.o-grid{显示：网格；grid-template-columns:var(--columns);}3.下面示例中的三列布局，我添加了--repeat-number:3和--gap:8px作为内联CSS。这些变量将被添加到o-grid类中，网格的设置将基于这些变量。HTML

CSS.o-grid{显示：网格；网格模板列：重复（var（--repeat-number），1fr）；grid-gap:var(--gap,0);}我喜欢给CSS变量添加默认值，以防变量没有设置。在上面的代码中，我使用了var(--gap,0)，如果用户不提供--gap变量，它的默认值将为0。动态网格项：minmax对我来说这是一个广泛使用的用例并且很重要。我经常使用Gridminmax，但是当我在多个页面上使用它时，我遇到了问题。让我们举一个不使用CSS变量的基本示例。在CSS中，我使用minmax为每个网格项定义250px的最小宽度。CSS.o-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{显示：网格；grid-template-columns:repeat(auto-fit,minmax(var(--item-width),1fr);grid-gap:var(--gap);}在HTML中，你可以在标签上设置CSS变量：

示例源码：https://codepen.io/shadeed/pe...大家都说简历里没有项目可写，所以给你找了一个项目，也给了你一个【搭建教程】，例子里有Flexbox的例子，还有文章标题，里面有作者的名字和标签，这些在页面中的布局是动态的，所以需要一种快速切换这些布局的方法。HTML

文章标题

作者：AhmadShadeed

发表于：CSS,Design

CSS.article-header__meta{display:flex;justify-content:var(--justify);}有了它，我可以调整内联样式以将值更改为另一个关键字。我发现这在快速制作原型甚至制作网站时很有用。按钮按钮宽度CSS变量也适用于按钮元素。假设有一个带有两个输入字段和一个按钮的表单。我的目的是通过使用内联CSS变量来控制按钮的宽度。有时按钮应该占据其父控件宽度的100%。html提交css.c-button{/*其他样式*/width:var(--width,initial);}按钮颜色的另一个有用用途是当有幽灵按钮（轮廓按钮）时。按钮的颜色可以是任何颜色，通过使用CSS变量，可以方便的改变颜色。HTML保存编辑删除CSS.c-button--ghost{/*其他样式*/background:transparent;颜色：var(--颜色，#000);border-color:currentColor;}CSS变量也适用于悬停效果。悬停时，按钮背景变为纯色，字体颜色为白色。示例源码：https://codepen.io/shadeed/pe...用户头像每个字符的大小都不一样，很适合用CSS变量来解决。假设有四个不同大小的用户头像。在CSS中，定义了以下样式：.c-avatar{display:inline-block;右边距：2rem；宽度：calc(var(--size,1)*30px);高度:calc(var(--size,1)*30px);适合对象：覆盖；边界半径：50%；盒子阴影：03px10px0rgba(#000,0.2);通过使用Calc()函数，我可以传递一个--size变量，它将乘以一个基本宽度值，在HTML中定义--size变量：

示例源码：https://codepen.io/shadeed/pe...人才的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。原文：https://css-tricks.com/patter...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里推荐给大家。一个简单易用的BUG监控工具Fundebug。交流文章每周更新一次。可以微信搜索【大千世界】立即阅读，回复【福利】还有很多前端视频等着你。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，欢迎Star。

上一篇：【JS基础系列】吃透执行上下文和调用栈（下）

下一篇：一年前端女性面试经验分享

使用内联CSS变量技巧来提高智能布局的效率！相关文章

最新推荐

猜你喜欢