使用內聯的 CSS 變量技巧，提高靈巧布局效率！

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

它是怎么工作的

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

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

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

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

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

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

除此之外，還可以在內聯CSS樣式中使用CSS變量。例如

HTML

CSS

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

CSS網格

示例側邊欄和主內容

在此設計中，我將CSS網格用于以下各項：

側邊欄的寬度是固定的，主內容是變化。假設側邊欄的寬度是240px。

1.邊欄和主菜單

Html

Html

2. 表單項

按照設計，每行有兩列，html 結構如下：

Html

CSS

3. 三列布局

在下面的示例中，我添加了--repeat-number：3和--gap：8px作為內聯CSS。這些變量將添加到o-grid類，網格的設置將基于這些變量。

HTML

CSS

我喜歡在CSS變量中添加默認值，以防變量沒有被設置。在上面的代碼中，我使用了var(--gap, 0)，如果使用者沒有提供--gap變量，則其默認值將為0。

動態 網格項：minmax

對我來說，這是一個廣泛使用的用例，并且非常重要。我經常使用Grid minmax，但是當我在多個頁面上使用它時，我遇到了一個問題。

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

在 CSS 中，我使用minmax為每個網格項目定義最小寬度250px。

CSS

現在，如果設計要求網格項目的寬度至少為300px，應該怎么做?我需要創建類似以下版本嗎?

想象一下，有五個不同的網格，每個網格具有不同的項目寬度，所以以上不是正確的解決方案。

使用CSS變量，我可以執行以下操作

在HTML中，就可以在標簽上設置 CSS 變量：

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

Flexbox示例

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

HTML

CSS

有了它，我可以調整內聯樣式以將值更改為另一個關鍵字。我發現這在進行快速原型制作甚至是制作網站時很有用。

按鈕

按鈕寬度

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

我的目的是通過使用內聯CSS變量來控制按鈕的寬度。有時，按鈕應占據其父控件的100%寬度。

html

css

按鈕顏色

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

HTML

CSS

CSS 變量同樣適合懸停效果。懸停時，按鈕背景將變為純色，并且字體顏色為白色。

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

用戶頭像

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

在CSS中，定義了以下樣式：

通過使用Calc()函數，我可以傳遞一個--size 變量，它將乘以一個基本寬度值，在HTML中定義 --size變量：

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

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

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

本文轉載自微 信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯系 大遷世界公眾號。

【編輯推薦】