应用CSS变量来提高乖巧布局效率的小技巧

发布时间：01/01 来源：未知浏览：关键词：

Flexbox示例

在示例中，有一个文章标题，其中包括作者姓名和标签。这些在页面中的排布方式是动态转变，所以需要一种快速切换这些规划方式的办法。

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/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: 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">