對CSS變數不熟悉，這5個事例可看看！

前端小智發表於2021-10-02
CSS變數
作者：Daniel
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

隨著 Web應用程式變得越來越大，CSS變得越來越大，越來越冗長，而且混亂不堪。 在良好的上下文中使用CSS變數，可為我們提供重用和輕鬆更改重複出現的CSS屬性的機制。

在純CSS支援變數之前，我們有像Less和Sass這樣的預處理程式。但是它們需要在使用前進行編譯，因此(有時)增加了一層額外的複雜性。

如何定義和使用CSS變數（也稱為自定義屬性）

要宣告一個簡單的 JS 變數，很簡單，如下所示：

let myColor = "green";

要宣告一個CSS變數，必須在該變數的名字前新增兩個橫線。

body {
    --english-green-color: #1B4D3E;
}

現在，為了使用CSS變數的值，我們可以使用var(...)函式。

.my-green-component{
    background-color: var(--english-green-color);
}

管理CSS變數的最簡單方法是將它們宣告在:root偽類中。 鑑於CSS變數與其他CSS定義一樣都遵循規則，因此將它們放在:root中將確保所有選擇器都可以訪問這些變數。

:root{
    --english-green-color: #1B4D3E;
}

覽器對CSS變數的支援情況

瀏覽器對CSS變數的支援一點也不差。 如果檢視 Can I Use CSS Variables 那會發現所有主流瀏覽器都支援CSS變數。 無論是在移動裝置還是 PC 上。

image.png

現在，讓我們看看這些CSS變數的實際作用。

示例1-管理顏色

使用CSS變數的最佳選擇之一就是設計的顏色。 不必一遍又一遍地複製和貼上相同的顏色，我們只需將它們放在變數中即可。

如果有該死的產品要我們更新特定的綠色陰影或將所有按鈕設定為紅色而不是藍色，則只需更改該CSS變數的值即可。 我們無需搜尋並替換所有出現的該顏色。

image.png

動手試試：https://codesandbox.io/s/8kky...

示例2-刪除重複的程式碼

通常我們需要構建一些元件的不同變體。相同的基本樣式，只是功能略有不同。我們舉例使用一個帶有不同顏色按鈕的案例。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

像這樣使用它們：

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

但是，這會增加一些程式碼重複。在.red類中，我們必須將邊框顏色和背景都設定為紅色。萬一哪天需要更改顏色，那就很麻煩了，需要一個一個的改。這個問題可以通過CSS變數輕鬆解決。

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

image.png

動手試試：https://codesandbox.io/s/yp29...

示例3-使某些屬性易於閱讀

如果我們想為更復雜的屬性值建立快捷方式，那麼CSS 變數非常有用，這樣我們就不必記住它了。

CSS屬性，如box-shadow、transform和font或其他具有多個引數的CSS規則就是很好的例子。

我們可以將屬性放在一個變數中，這樣我們就可以通過更易於閱讀的格式重用它。

// 主要程式碼
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

動手試試：https://codesandbox.io/s/q3ww...

image.png

示例4-級聯變數

標準級聯規則也適用於CSS變數。如果一個自定義屬性被宣告多次，css檔案中最下面的定義將覆蓋它上面的定義。

下面的示例演示了在使用者操作上動態操作屬性是多麼容易，同時也保持程式碼的清晰和簡潔。

// 主要程式碼
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

動手試試：https://codesandbox.io/s/xj0q...

示例5 -主題切換與CSS變數

CSS變數的一大優點是它們的響應特性。 一旦我們更新它們，具有CSS變數值的任何屬性也會被更新。 因此，僅需使用幾行Javascript並巧妙地使用CSS變數，便可以建立主題切換器機制。

動手試試：https://codesandbox.io/s/24j4...

擴充套件

就像CSS中幾乎所有東西一樣，變數也非常簡單易用。 以下是一些未包含在示例中的技巧，但在某些情況下仍然非常有用：

注意大寫，CSS變數區分大小寫

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

當我們使用var()函式時，還可以傳入第二個引數。 如果找不到自定義屬性，則將使用此值：

width: var(--custom-width, 33%);

可以將CSS變數直接用於HTML

<!--HTML-->
<html style="--size: 600px">
body {
  max-width: var(--size)
}

可以在其他CSS變數中使用CSS變數：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通過媒體查詢將CSS變數作為條件。 例如，以下程式碼根據螢幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函式中也可以使用CSS變數。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 變數不是靈丹妙藥。 它們不會解決我們在CSS領域中遇到的所有問題。 但是，它可以讓我們的程式碼更具可讀性和可維護性。

而且，它們極大地提高了跨大型文件進行更改的便利性。 只需將所有常量設定在一個單獨的檔案中，當我們只想對變數進行更改時，就不必跳過數千行程式碼。

~完，我是小智，Spa去了，記得點個贊支援一下油。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：http://www.js-craft.io/blog/1...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章