当前位置：首页 > 科技观察

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

时间：2023-03-15 23:24:21 科技观察

在某些情况下，我需要一种简单的方法来创建网格布局。例如，每次改变主意时，无需修改CSS即可快速绘制一个五列网格。在本文中，让我们一起探索一些用例，并考虑如何实现和使用它们。它是如何工作的在深入了解这些概念之前，让我们首先回顾一下CSS变量的基础知识，我们也可以将其称为“自定义属性”。所有主流浏览器都支持CSS变量。以下是各个浏览器的支持情况：如果要将CSS变量定义为全局变量，需要在:root声明中加上（:root等同于）。如果变量特定于组件，则可以在组声明中定义它。在下面的示例中，我定义了一个全局变量--size用于方形元素的宽度和高度。: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

CSS.elem{background:var(--background);}接下来，我们将根据上述概念进行一些示例演示.CSS网格示例侧边栏和主要内容在这个设计中，我将CSS网格用于以下内容：侧边栏和主菜单表单项三列布局侧边栏的宽度是固定的，主要内容是可变的。假设侧边栏的宽度为240px。1.侧边栏和主菜单Html

Html.o-grid{display:grid;grid-template-columns:var(--columns);}2.按照设计，每一行有两列，html结构如下：Html

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

/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对我来说这是一个广泛使用的用例并且很重要。我经常使用Gridminmax，但是当我在多个页面上使用它时，我遇到了问题。让我们举一个不使用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));}想象一下有五个不同的网格grid，每个grid都有不同的itemwidth，所以上面的不是正确的解法。使用CSS变量，我可以执行以下操作。o-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--item-width),1fr);grid-gap:var(--gap);}在HTML中，可以在标签上设置CSS变量：

示例源码：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4Flexboxexampleinexample中有一个文章标题，里面有作者姓名和标签，这些在页面上的排列方式是动态变化的，所以需要一种快速切换这些布局方式的方法。HTML

Articletitle

作者：AhmadShadeed

Publishedunder:CSS,Design

CSS.article-header__meta{display:flex;justify-content:var(--justify);}有了它，我可以调整内联样式来改变另一个关键字的值。我发现这在快速制作原型甚至制作网站时很有用。按钮按钮宽度CSS变量也适用于按钮元素。假设有一个带有两个输入字段和一个按钮的表单。我的目的是通过使用内联CSS变量来控制按钮的宽度。有时按钮应该占据其父控件宽度的100%。html提交css.c-button{/*Otherstyles*/width:var(--width,initial);}按钮颜色的另一个有用用途是当有幽灵按钮（轮廓按钮）时。按钮的颜色可以是任何颜色，通过使用CSS变量，可以方便的改变颜色。HTML保存编辑删除CSS.c-button--ghost{/*Otherstyles*/background:transparent;color:var(--color,#000);border-color:currentColor;}CSS变量悬停效果也是如此。悬停时，按钮背景变为纯色，字体颜色为白色。示例源码：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995用户头像每个角色的大小都不一样，很适合用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:03px10px0rgba(#000,0.2);}通过使用Calc()函数，我可以传递一个--size变量,它将乘以HTML--size变量中定义的基本宽度值：

示例源代码：https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d作者：Ahmadshaded译者：FrontendXiaozhi来源：sitepoint原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/”，可以通过以下二维码关注代码，转载请联系大千世界公众号。

上一篇：外媒称谷歌短期内不会回归中国：本质问题没有解决

下一篇：七夕如何找到离女神最近的距离？

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

最新推荐

猜你喜欢