使用内联的-CSS-变量技巧提高灵巧布局效率

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

有些状况下，我须要用一种简略的办法来创立网格布局。例如，每次我扭转主见时，在不批改 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 网格用于以下各项：

边栏和主菜单
表单项
三列布局

侧边栏的宽度是固定的，主内容是变动。假如侧边栏的宽度是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…

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

在示例中，有一个文章题目，其中蕴含作者姓名和标签。这些在页面中的排布形式是动态变化，所以须要一种疾速切换这些布局形式的办法。

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 曾经收录，欢送 Star。

使用内联的-CSS-变量技巧提高灵巧布局效率

它是怎么工作的

CSS 网格示例

侧边栏和主内容

动静网格项：`minmax`

Flexbox 示例

按钮

按钮宽度

按钮色彩

用户头像

交换

Just My Socks（注册教程内含优惠码）

使用内联的-CSS-变量技巧提高灵巧布局效率

它是怎么工作的

CSS 网格示例

侧边栏和主内容

动静网格项：minmax

Flexbox 示例

按钮

按钮宽度

按钮色彩

用户头像

交换

Just My Socks（注册教程 内含优惠码）

动静网格项：`minmax`

Just My Socks（注册教程内含优惠码）