使用变量布局效率情况

使用CSS变量提高灵巧布局效率的小技巧

编程开发 2020-09-28 07:20:47 36

导读

有些情况下,我需要用一种简单的方法来创建网格布局。例如,每次我改变主意时,在不修改CSS的情况下快速画出五列网格。在本文中,我们一起探索一些用例,并思考如果实现及使用它们。它是怎么工作的在深入探讨这些概念之前,首先我们来回顾一下CSS变量的基础知识,我们也可以将……

有些情况下,我需要用一种简单的方法来创建网格布局。 例如,每次我改变主意时,在不修改CSS的情况下快速画出五列网格。 在本文中,我们一起探索一些用例,并思考如果实现及使用它们。

它是怎么工作的

在深入探讨这些概念之前,首先我们来回顾一下 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变量提高灵巧布局效率的小技巧

在此设计中,我将CSS网格用于以下各项:

  1. 边栏和主菜单

  2. 表单项

  3. 三列布局

侧边栏的宽度是固定的,主内容是变化。假设侧边栏的宽度是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变量提高灵巧布局效率的小技巧

在 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/pen/7d3e0d575a5cecb86233fc7d72fa90d4


1253067 TFnetwork_cn