這篇文章將為大家詳細講解有關CSS變量的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯主要從事成都網站設計、成都網站制作、網頁設計、企業做網站、公司建網站等業務。立足成都服務全州,10多年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:028-86922220

隨著 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 上。

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

示例1-管理顏色

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

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

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

像這樣使用它們：

Hello
Hello

但是，這會增加一些代碼重復。在.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-使某些屬性易于閱讀

如果我們想為更復雜的屬性值創建快捷方式，那么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/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

示例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/xj0qxn2l7w?from-embed=&file=/index.html

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

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

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

擴展

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

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

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

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

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

可以將CSS變量直接用于HTML

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領域中遇到的所有問題。 但是，它可以讓我們的代碼更具可讀性和可維護性。

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

關于“CSS變量的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。