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

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。

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

對我來說，這是一個(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)該怎么做？ 我需要創(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 變量：

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

Flexbox示例

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

HTML

    
Article title
    
        
By Ahmad Shadeed
        
Published under: CSS, Design
    

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

Submit

css

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

按鈕顏色

另一個(gè)有用的用途是當(dāng)有重影按鈕（輪廓按鈕）時(shí)。 按鈕的顏色可以是任何顏色，通過使用CSS變量，可以輕松更改顏色。

HTML

Save Edits
Delete

CSS

.c-button--ghost {
  /* Other styles */
  background: transparent;
  color: var(--color, #000);
  border-color: currentColor;
}

CSS 變量同樣適合懸停效果。懸停時(shí)，按鈕背景將變?yōu)榧兩?，并且字體顏色為白色。

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

用戶頭像

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

在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變量：

以上是“怎么使用CSS變量來提高靈巧布局效率”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！