手把手帶你透過5個例子來熟悉CSS變數！
- 青灯夜游轉載
- 2021-09-28 11:10:052331瀏覽
大家對CSS變數熟悉嗎？如果不熟悉，不要緊！以下這篇文章就來跟大家介紹CSS變量，透過5個例子來帶大家熟悉CSS變量，希望對大家有幫助！
隨著 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
}像這樣使用它們：
<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-使某些屬性易於閱讀
如果我們想為更複雜的屬性值建立快捷方式，那麼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
<!--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领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。
而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。
原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/
作者：Daniel
更多编程相关知识，请访问：编程视频！！
以上是手把手帶你透過5個例子來熟悉CSS變數！的詳細內容。更多資訊請關注PHP中文網其他相關文章！