用5個示例理解 CSS 變量

作者：前端小智 2021-05-25 07:46:43

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

隨著 Web應用程序變得越來越大，CSS變得越來越大，越來越冗長，而且混亂不堪。在良好的上下文中使用CSS變量，可為我們提供重用和輕松更改重復出現(xiàn)的CSS屬性的機制。

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

如何定義和使用CSS變量(也稱為自定義屬性)

要聲明一個簡單的 JS 變量，很簡單，如下所示：

let myColor = "green";

要聲明一個CSS變量，必須在該變量的名字前添加兩個橫線。

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

現(xiàn)在，為了使用CSS變量的值，我們可以使用var(...)函數(shù)。

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

管理CSS變量的最簡單方法是將它們聲明在:root偽類中。鑒于CSS變量與其他CSS定義一樣都遵循規(guī)則，因此將它們放在:root中將確保所有選擇器都可以訪問這些變量。

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

覽器對CSS變量的支持情況

瀏覽器對CSS變量的支持一點也不差。如果查看 Can I Use CSS Variables 那會發(fā)現(xiàn)所有主流瀏覽器都支持CSS變量。無論是在移動設備還是 PC 上。

現(xiàn)在，讓我們看看這些CSS變量的實際作用。

示例1-管理顏色

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

如果有該死的產(chǎn)品要我們更新特定的綠色陰影或將所有按鈕設置為紅色而不是藍色，則只需更改該CSS變量的值即可。我們無需搜索并替換所有出現(xiàn)的該顏色。

動手試試：https://codesandbox.io/s/8kkyl4mlm9?from-embed

示例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 
}

動手試試：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

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

如果我們想為更復雜的屬性值創(chuàng)建快捷方式，那么CSS 變量非常有用，這樣我們就不必記住它了。

CSS屬性，如box-shadow、transform和font或其他具有多個參數(shù)的CSS規(guī)則就是很好的例子。

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

// 主要代碼 
: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/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

示例4-級聯(lián)變量

標準級聯(lián)規(guī)則也適用于CSS變量。如果一個自定義屬性被聲明多次，css文件中最下面的定義將覆蓋它上面的定義。

下面的示例演示了在用戶操作上動態(tài)操作屬性是多么容易，同時也保持代碼的清晰和簡潔。

// 主要代碼 
.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/xj0qxn2l7w?from-embed=&file=/index.html

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

CSS變量的一大優(yōu)點是它們的響應特性。一旦我們更新它們，具有CSS變量值的任何屬性也會被更新。因此，僅需使用幾行Javascript并巧妙地使用CSS變量，便可以創(chuàng)建主題切換器機制。

動手試試：https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

擴展

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

注意大寫，CSS變量區(qū)分大小寫

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

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

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變量作為條件。例如，以下代碼根據(jù)屏幕大小更改 padding 的值：

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

在calc()函數(shù)中也可以使用CSS變量。

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

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

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

作者：Danie 譯者：前端小智來源：stackabuse原文：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

責任編輯：姜華來源：大遷世界

CSS CSS 變量 Web應用

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看