用5個示例理解 CSS 變量

時間 2021-05-27

標籤 css html 前端 git github 面試瀏覽器微信函數工具欄目 CSS 简体版

原文原文鏈接

做者：Daniel
譯者：前端小智
來源：stackabuse

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

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

隨着 Web應用程序變得愈來愈大，CSS變得愈來愈大，愈來愈冗長，並且混亂不堪。在良好的上下文中使用CSS變量，可爲咱們提供重用和輕鬆更改重複出現的CSS屬性的機制。前端

在純CSS支持變量以前，咱們有像Less和Sass這樣的預處理程序。可是它們須要在使用前進行編譯，所以(有時)增長了一層額外的複雜性。git

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

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

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 上。函數

如今，讓咱們看看這些CSS變量的實際做用。工具

示例1-管理顏色

使用CSS變量的最佳選擇之一就是設計的顏色。沒必要一遍又一遍地複製和粘貼相同的顏色，咱們只需將它們放在變量中便可。

若是有該死的產品要咱們更新特定的綠色陰影或將全部按鈕設置爲紅色而不是藍色，則只需更改該CSS變量的值便可。咱們無需搜索並替換全部出現的該顏色。

動手試試：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
}

動手試試：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...

示例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... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。