溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)CSS變量的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
隨著 Web應(yīng)用程序變得越來越大，CSS變得越來越大，越來越冗長，而且混亂不堪。 在良好的上下文中使用CSS變量，可為我們提供重用和輕松更改重復(fù)出現(xiàn)的CSS屬性的機制。
在純CSS支持變量之前，我們有像Less和Sass這樣的預(yù)處理程序。但是它們需要在使用前進行編譯，因此(有時)增加了一層額外的復(fù)雜性。
要聲明一個簡單的 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變量的支持一點也不差。 如果查看 Can I Use CSS Variables 那會發(fā)現(xiàn)所有主流瀏覽器都支持CSS變量。 無論是在移動設(shè)備還是 PC 上。
現(xiàn)在，讓我們看看這些CSS變量的實際作用。
使用CSS變量的最佳選擇之一就是設(shè)計的顏色。 不必一遍又一遍地復(fù)制和粘貼相同的顏色，我們只需將它們放在變量中即可。
如果有該死的產(chǎn)品要我們更新特定的綠色陰影或?qū)⑺邪粹o設(shè)置為紅色而不是藍色，則只需更改該CSS變量的值即可。 我們無需搜索并替換所有出現(xiàn)的該顏色。
動手試試：https://codesandbox.io/s/8kkyl4mlm9?from-embed
通常我們需要構(gòu)建一些組件的不同變體。相同的基本樣式，只是功能略有不同。我們舉例使用一個帶有不同顏色按鈕的案例。
.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>
但是，這會增加一些代碼重復(fù)。在.red類中，我們必須將邊框顏色和背景都設(shè)置為紅色。萬一哪天需要更改顏色，那就很麻煩了，需要一個一個的改。這個問題可以通過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
如果我們想為更復(fù)雜的屬性值創(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
標準級聯(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
CSS變量的一大優(yōu)點是它們的響應(yīng)特性。 一旦我們更新它們，具有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領(lǐng)域中遇到的所有問題。 但是，它可以讓我們的代碼更具可讀性和可維護性。
而且，它們極大地提高了跨大型文檔進行更改的便利性。 只需將所有常量設(shè)置在一個單獨的文件中，當我們只想對變量進行更改時，就不必跳過數(shù)千行代碼。
關(guān)于“CSS變量的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼