有些情況下，我需要用一種簡(jiǎn)單的方法來創(chuàng)建網(wǎng)格布局。例如，每次我改變主意時(shí)，在不修改CSS的情況下快速畫出五列網(wǎng)格。在本文中，我們一起探索一些用例，并思考如果實(shí)現(xiàn)及使用它們。

它是怎么工作的

在深入探討這些概念之前，首先我們來回顧一下 CSS 變量的基礎(chǔ)知識(shí)， 我們也可以將它稱為“自定義屬性”。

所有主流瀏覽器都支持CSS變量，下面是各個(gè)瀏覽器的支持情況：

如果要定義CSS變量是全局變量，則需要將其添加到:root聲明中(:root等效于)。如果該變量特定于組件，則可以在該組內(nèi)聲明中定義它。

在下面的例子中，我定義了一個(gè)全局變量--size，它用于square 元素的寬度和高度。

:root { 
    --size: 50px; 
} 
 
.square { 
    width: var(--size); 
    height: var(--size); 
} 

如果--size沒有定義，要怎么辦呢?在傳遞的變量無效的情況下，CSS 支持定義默認(rèn)變量或回退變量。

在下面的例子中的 var(--size, 10px)。如果--size無效，則寬度和高度值將為10px。

.square { 
    width: var(--size, 10px); 
    height: var(--size, 10px); 
} 

除此之外，還可以在內(nèi)聯(lián)CSS樣式中使用CSS變量。例如

HTML

<div class="elem" style="--background: red;"></div> 

CSS

.elem { 
    background: var(--background); 
} 

接著， 我們以上述這些概念，還演示一些事例。

CSS網(wǎng)格

示例側(cè)邊欄和主內(nèi)容

在此設(shè)計(jì)中，我將CSS網(wǎng)格用于以下各項(xiàng)：

1. 邊欄和主菜單
2. 表單項(xiàng)
3. 三列布局

側(cè)邊欄的寬度是固定的，主內(nèi)容是變化。假設(shè)側(cè)邊欄的寬度是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. 表單項(xiàng)

按照設(shè)計(jì)，每行有兩列，html 結(jié)構(gòu)如下：

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作為內(nèi)聯(lián)CSS。這些變量將添加到o-grid類，網(wǎng)格的設(shè)置將基于這些變量。

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變量中添加默認(rèn)值，以防變量沒有被設(shè)置。在上面的代碼中，我使用了var(--gap, 0)，如果使用者沒有提供--gap變量，則其默認(rèn)值將為0。

動(dòng)態(tài)網(wǎng)格項(xiàng)：minmax

對(duì)我來說，這是一個(gè)廣泛使用的用例，并且非常重要。我經(jīng)常使用Grid minmax，但是當(dāng)我在多個(gè)頁面上使用它時(shí)，我遇到了一個(gè)問題。

讓我們舉一個(gè)不使用 CSS 變量的基本示例。

在 CSS 中，我使用minmax為每個(gè)網(wǎng)格項(xiàng)目定義最小寬度250px。

CSS

.o-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); 
  grid-gap: 16px; 
} 

現(xiàn)在，如果設(shè)計(jì)要求網(wǎng)格項(xiàng)目的寬度至少為300px，應(yīng)該怎么做?我需要?jiǎng)?chuàng)建類似以下版本嗎?

.o-grid--2 { 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
} 

想象一下，有五個(gè)不同的網(wǎng)格，每個(gè)網(wǎng)格具有不同的項(xiàng)目寬度，所以以上不是正確的解決方案。

使用CSS變量，我可以執(zhí)行以下操作

.o-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); 
    grid-gap: var(--gap); 
} 

在HTML中，就可以在標(biāo)簽上設(shè)置 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

Flexbox示例

在示例中，有一個(gè)文章標(biāo)題，其中包含作者姓名和標(biāo)簽。這些在頁面中的排布方式是動(dòng)態(tài)變化，所以需要一種快速切換這些布局方式的方法 。

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); 
} 

有了它，我可以調(diào)整內(nèi)聯(lián)樣式以將值更改為另一個(gè)關(guān)鍵字。我發(fā)現(xiàn)這在進(jìn)行快速原型制作甚至是制作網(wǎng)站時(shí)很有用。

按鈕

按鈕寬度

CSS 變量也適用于按鈕元素。假設(shè)有一個(gè)帶有兩個(gè)input字段和一個(gè)按鈕的表單。

我的目的是通過使用內(nèi)聯(lián)CSS變量來控制按鈕的寬度。有時(shí)，按鈕應(yīng)占據(jù)其父控件的100%寬度。

html

<button class="c-button" style="--width: 100%;">Submit</button> 

css

.c-button { 
    /* Other styles */ 
    width: var(--width, initial); 
} 

按鈕顏色

另一個(gè)有用的用途是當(dāng)有重影按鈕(輪廓按鈕)時(shí)。按鈕的顏色可以是任何顏色，通過使用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 變量同樣適合懸停效果。懸停時(shí)，按鈕背景將變?yōu)榧兩⑶易煮w顏色為白色。

事例源碼：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

用戶頭像

每個(gè)角色的大小都不同，這非常適合用 CSS 變量來解決。假設(shè)有四個(gè)不同大小的用戶頭像。

[[333402]]

在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()函數(shù)，我可以傳遞一個(gè)--size 變量，它將乘以一個(gè)基本寬度值，在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/pen/cdaac5ff667e1f7d9c8241655441f10d

作者：Ahmad shaded 譯者：前端小智 來源：sitepoint

原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。