曾經(jīng)主題切換功能可以作為軟件中亮眼的賣點(diǎn)存在，畢竟那時(shí)候要實(shí)現(xiàn)換膚可不容易，一套主題一套樣式，這代碼的重復(fù)率嗖嗖嗖的就漲上去了~~當(dāng)然也可以借助 CSS 預(yù)編譯 語言編譯出多套 CSS 樣式表。
沒有用覺得我們其實(shí)并不需要多套樣式表實(shí)現(xiàn)換膚？我們只是想要一個(gè)像 JS 設(shè)計(jì)模式中的適配器，約定好規(guī)則，不同的主題按照約定規(guī)則進(jìn)行適配即可。
CSS 變量
什么是變量？
就是在一個(gè)地方定義，可到處使用的東西。遇到不滿意的時(shí)候，也可以隨時(shí)進(jìn)行改變。嘿...不滿意就換這不是理想中的生活嗎？扯遠(yuǎn)了~~
CSS 變量（又稱為自定義屬性），可以讓開發(fā)者集中管理 CSS 中可復(fù)用的值，比如：顏色，間距，字體大小等等一切 CSS 中的屬性值。
變量聲明規(guī)則
在 CSS 中，變量名必須以 -- 開頭，比如：--base-font-size、--base-color 等，需注意，變量名是區(qū)分大小寫的，如 --a 和 --A 是兩個(gè)不同的變量。
雖然變量名的書寫規(guī)范沒強(qiáng)制要求以短橫線 - 分割，但為了與 css 屬性名保持一致，還是建議使用短橫線分割，不建議使用駝峰命名，比如 --baseFontSize 不推薦，但要這么寫代碼也能運(yùn)行。
在聲明一個(gè)變量也可以使用另一個(gè)變量作為變量值。
語法：
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
--base-border: 2px solid var(--base-color, red);
變量申明位置
如果全局使用的變量，可以使用 :root 選擇器聲明：
:root {
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
局部變量可以在選擇器中聲明，變量名相同情況下，局部變量會(huì)覆蓋全局變量：
.box {
--base-font-size: 18px;
--box-color: #666;
--box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
變量使用
在 CSS 中，要使用變量必須要用到 var() 函數(shù)，var() 函數(shù)的作用就是去獲取變量的值，語法如下：
.box {
font-size: var(--base-font-size);
color: var(--base-color);
box-shadow: var(--base-shadow);
}
.box {
font-size: 24px;
color: #333;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
示例：
<div class="box">
box 中的文字內(nèi)容
</div>
<style>
:root {
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.box {
border: 2px solid rgba(255, 71, 87,0.3);
margin: 20px 0;
width: 400px;
height: 120px;
font-size: var(--base-font-size);
color: var(--base-color);
box-shadow: var(--base-shadow);
}
</style>
效果：
var() 默認(rèn)值
var() 的第二個(gè)參數(shù)可以設(shè)置一個(gè)默認(rèn)值，如果獲取的變量沒有設(shè)置，則使用默認(rèn)值進(jìn)行屬性賦值，可以理解為 山中無老虎，猴子稱大王。
示例：
<div class="box">
box 中的文字內(nèi)容
</div>
<style>
:root {
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.box {
border: 2px solid rgba(255, 71, 87,0.3);
margin: 20px 0;
width: 400px;
height: 120px;
font-size: var(--base-font-size, 14px);
color: var(--base-color, #ff4757);
box-shadow: var(--base-shadow);
background-color: var(--base-bg-color, rgba(255, 71, 87,0.1));
}
</style>
font-size 和 color 的值都有定義，所以會(huì)使用的定義的值，而 background-color 沒有定義，所以會(huì)使用默認(rèn)值。效果：
變量覆蓋
有時(shí)候可能我們不想要默認(rèn)的變量值，而是需要特殊設(shè)定。比如某些三方組件里面使用 root 聲明了變量，這時(shí)候要想覆蓋 root 聲明的變量，應(yīng)該怎么做？
變量覆蓋規(guī)則：
1、a.css 和 b.css 同時(shí)使用 root 聲明了同一個(gè)變量，那么跟引入兩個(gè) css 文件的順序有關(guān)，后引入的文件會(huì)覆蓋前一個(gè)。
2、:root 聲明的變量，可以使用 :root:root 覆蓋。
3、局部變量優(yōu)先級(jí)高于全局變量。
比如有如下兩個(gè) CSS 代碼文件：
a.css 文件：
:root {
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
b.css 文件：
:root {
--base-color: red;
}
:root:root {
--base-font-size: 16px;
}
.box {
border: 2px solid rgba(255, 71, 87,0.3);
margin: 20px 0;
width: 400px;
height: 120px;
font-size: var(--base-font-size, 14px);
color: var(--base-color);
box-shadow: var(--base-shadow);
background-color: var(--base-bg-color, rgba(255, 71, 87,0.1));
}
.box:nth-child(1) {
--base-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3);
}
a.css 在 b.css 之前引入示例：
<link rel="stylesheet" href="./a.css">
<link rel="stylesheet" href="./b.css">
<div class="box">
box1 中的文字內(nèi)容
</div>
<div class="box">
box2 中的文字內(nèi)容
</div>
效果：
b.css 在 a.css 之前引入示例：
<link rel="stylesheet" href="./b.css">
<link rel="stylesheet" href="./a.css">
<div class="box">
box1 中的文字內(nèi)容
</div>
<div class="box">
box2 中的文字內(nèi)容
</div>
效果：
由于變量的覆蓋特性，所以不建議到處聲明變量，應(yīng)該集中管理，在固定文件中聲明 CSS 變量??！
主題換膚
一個(gè)簡單的換膚示例：
<div class="box">
box 中的文字內(nèi)容
</div>
<div>
<a href="javascript:;" onclick="document.body.className = ''">無主題</a>
<a href="javascript:;" onclick="document.body.className = 'theme-1'">主題1</a>
<a href="javascript:;" onclick="document.body.className = 'theme-2'">主題2</a>
</div>
<style>
.theme-1 {
--base-font-size: 24px;
--base-color: #333;
--base-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3);
--base-bg-color: rgba(71, 163, 255, 0.1);
--base-border: 2px solid rgba(71, 163, 255,0.3);
}
.theme-2 {
--base-font-size: 18px;
--base-color: #333;
--base-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
--base-bg-color: rgba(255, 197, 71, 0.1);
--base-border: 2px solid rgba(255, 197, 71,0.3);
}
.box {
margin: 20px 0;
width: 400px;
height: 120px;
border: var(--base-border, 2px solid rgba(255, 71, 87,0.3));
font-size: var(--base-font-size, 16px);
color: var(--base-color, #ff4757);
box-shadow: var(--base-shadow, 3px 3px 6px rgba(0, 0, 0, 0.3));
background-color: var(--base-bg-color, rgba(255, 71, 87,0.1));
}
</style>
效果：
寫在最后
CSS 變量可以讓我們很方便的進(jìn)行主題換膚，也讓前端可以集中管理重復(fù)的顏色、字體、邊框等屬性，增強(qiáng)了代碼的可維護(hù)性。
轉(zhuǎn)自https://www.cnblogs.com/linx/p/18861016
該文章在 2025/10/13 8:38:58 編輯過
400 186 1886
