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

時間 2020-07-18

標籤使用內聯 css 變量技巧提升靈巧佈局效率欄目 CSS 简体版

原文原文鏈接

做者：Ahmad shaded 譯者：前端小智來源：sitepointcss

點贊再看，微信搜索**【大遷世界】**關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub github.com/qq449245884… 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。html

有些狀況下，我須要用一種簡單的方法來建立網格佈局。例如，每次我改變主意時，在不修改CSS的狀況下快速畫出五列網格。在本文中，咱們一塊兒探索一些用例，並思考若是實現及使用它們。前端

它是怎麼工做的

在深刻探討這些概念以前，首先咱們來回顧一下 CSS 變量的基礎知識，咱們也能夠將它稱爲「自定義屬性」。git

全部主流瀏覽器都支持CSS變量，下面是各個瀏覽器的支持狀況：github

若是要定義CSS變量是全局變量，則須要將其添加到:root聲明中（:root等效於<html>）。若是該變量特定於組件，則能夠在該組內聲明中定義它。瀏覽器

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

:root {
    --size: 50px;
}

.square {
    width: var(--size);
    height: var(--size);
}
複製代碼

若是--size沒有定義，要怎麼辦呢?在傳遞的變量無效的狀況下，CSS 支持定義默認變量或回退變量。微信

在下面的例子中的 var(--size, 10px)。若是--size無效，則寬度和高度值將爲 10px。ide

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

除此以外，還能夠在內聯CSS樣式中使用CSS變量。例如函數

HTML

<div class="elem" style="--background: red;"></div>
複製代碼

CSS

.elem {
    background: var(--background);
}
複製代碼

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

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

CSS網格示例

側邊欄和主內容

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

邊欄和主菜單
表單項
三列布局

側邊欄的寬度是固定的，主內容是變化。假設側邊欄的寬度是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. 表單項

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

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做爲內聯CSS。這些變量將添加到o-grid類，網格的設置將基於這些變量。

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

動態網格項：`minmax`

對我來講，這是一個普遍使用的用例，而且很是重要。我常用Grid minmax，可是當我在多個頁面上使用它時，我遇到了一個問題。

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

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

CSS

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

如今，若是設計要求網格項目的寬度至少爲300px，應該怎麼作？我須要建立相似如下版本嗎？

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

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

使用CSS變量，我能夠執行如下操做

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

在HTML中，就能夠在標籤上設置 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>
複製代碼

事例源碼：codepen.io/shadeed/pen…

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

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 變量一樣適合懸停效果。懸停時，按鈕背景將變爲純色，而且字體顏色爲白色。

事例源碼：codepen.io/shadeed/pen…

用戶頭像

每一個角色的大小都不一樣，這很是適合用 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">
複製代碼