這篇文章帶大家了解CS??S變量，聊聊CSS變量是怎麼運(yùn)作的，並介紹一下如何使用內(nèi)聯(lián)CSS變量，以提高靈巧佈局效率，希望對(duì)大家有所幫助！

有些情況下，我需要用簡(jiǎn)單的方法來(lái)建立網(wǎng)格佈局。例如，每次我改變主意時(shí)，在不修改CSS的情況下快速畫(huà)出五列網(wǎng)格。在本文中，我們一起探索一些用例，並思考如果實(shí)現(xiàn)及使用它們。 【推薦學(xué)習(xí)：css影片教學(xué)】

它是怎麼運(yùn)作的

#在深入探討這些概念之前，首先我們來(lái)回顧C(jī)SS 變數(shù)的基礎(chǔ)知識(shí)， 我們也可以稱(chēng)它為“自訂屬性”。

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

如果要定義CSS變量是全域變量，則需要將其新增至:root宣告中（:root等效於）。如果該變數(shù)特定於組件，則可以在該組內(nèi)聲明中定義它。

在下面的範(fàn)例中，我定義了一個(gè)全域變數(shù)--size，它用於square 元素的寬度和高度。

:root?{
????--size:?50px;
}

.square?{
????width:?var(--size);
????height:?var(--size);
}

如果--size沒(méi)有定義，該怎麼辦呢?在傳遞的變數(shù)無(wú)效的情況下，CSS 支援定義預(yù)設(shè)變數(shù)或回退變數(shù)。

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

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

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

HTML

<div></div>

CSS

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

接著， 我們以上述這些概念，也示範(fàn)一些例子。

大家都說(shuō)履歷沒(méi)項(xiàng)目寫(xiě)，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教學(xué)】。

CSS網(wǎng)格範(fàn)例

側(cè)邊欄與主內(nèi)容

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

• #側(cè)邊欄與主選單

• 表單項(xiàng)目

• 三列佈局

側(cè)邊欄的寬度是固定的，主內(nèi)容是變化。假設(shè)側(cè)邊欄的寬度是240px。

1.側(cè)邊欄與主選單

Html

<div>
????<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></div>
??<div></div>
??<div></div>
??<div></div>

CSS

.o-grid?{
????display:?grid;
????grid-template-columns:?var(--columns);
}

3. 三列佈局

在下面的範(fàn)例中，我新增了--repeat-number： 3和--gap：8px作為內(nèi)聯(lián)CSS。這些變數(shù)將會(huì)加到o-grid類(lèi)，網(wǎng)格的設(shè)定將基於這些變數(shù)。

HTML

??<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變數(shù)中新增預(yù)設(shè)值，以防變數(shù)沒(méi)有被設(shè)定。在上面的程式碼中，我使用了var(--gap, 0)，如果使用者沒(méi)有提供--gap變量，則其預(yù)設(shè)值將為0 。

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

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

讓我們舉一個(gè)不使用 CSS 變數(shù)的基本範(fàn)例。

在CSS 中，我使用minmax為每個(gè)網(wǎng)格專(zhuān)案定義最小寬度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，該怎麼做？我需要建立類(lèi)似以下版本嗎？

.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 變數(shù)：

?????<div></div>
?????<div></div>
?????<div></div>




?????<div></div>
?????<div></div>
?????<div></div>




?????<div></div>
?????<div></div>
?????<div></div>

事例原始碼：https: //codepen.io/shadeed/pen/xxxPYog/7d3e0d575a5cecb86233fc7d72fa90d4

Flexbox範(fàn)例

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

HTML

<div>
????<h2>Article?title</h2>
????<div>
????????<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è)按鈕的表單。

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

html

<button>Submit</button>

css

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

按鈕顏色

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

HTML

<button>Save?Edits</button>
<button>Delete</button>

CSS

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

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

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

用戶頭像

每個(gè)角色的大小都不同，這非常適合用 CSS 變量來(lái)解決。假設(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);
}

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

<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="CSS變數(shù)是怎麼運(yùn)作的？如何使用內(nèi)嵌CSS變數(shù)進(jìn)行佈局？" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="CSS變數(shù)是怎麼運(yùn)作的？如何使用內(nèi)嵌CSS變數(shù)進(jìn)行佈局？" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="CSS變數(shù)是怎麼運(yùn)作的？如何使用內(nèi)嵌CSS變數(shù)進(jìn)行佈局？" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="CSS變數(shù)是怎麼運(yùn)作的？如何使用內(nèi)嵌CSS變數(shù)進(jìn)行佈局？" >

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

作者：Ahmad shaded

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

（學(xué)習(xí)視頻分享：web前端）

以上是CSS變數(shù)是怎麼運(yùn)作的？如何使用內(nèi)嵌CSS變數(shù)進(jìn)行佈局？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！