分享 1 個(gè) CSS 面試題，如何在CSS中實(shí)現(xiàn) if-else
let color;if (reads < 100){color = 'gray'} else {color = 'brown'}
所以現(xiàn)在問題變成了：我們?nèi)绾卧?CSS 中實(shí)現(xiàn)這個(gè) if-else 邏輯？請記住，CSS 中沒有 if-else 關(guān)鍵字之類的東西。
在 CSS 中實(shí)現(xiàn) if-else
在 CSS 中實(shí)現(xiàn) if-else 的邏輯是本題考查的核心技能。讓我們在下面完成這個(gè)邏輯。如果你學(xué)會了這個(gè)技巧，你可以用它來實(shí)現(xiàn)許多強(qiáng)大的 CSS 效果。
首先，讓我們了解一個(gè)叫做clamp的函數(shù)。
clamp() CSS 函數(shù)將一個(gè)值限制在上限和下限之間。clamp() 允許在定義的最小值和最大值之間的值范圍內(nèi)選擇中間值。
基本語法格式：
clamp(min, var, max)我們可以將clamp函數(shù)理解為這樣的偽代碼：
funciton clamp(min, var, max){if(var <= min){return min}if(var >= max){return max}if(var > min && var < max){return var}}
所以：
clamp(10, 13, 20) → 13
clamp(10, 2, 20) → 10
clamp(10, 30, 20) → 20
用法示例：
font-size 的值不會超過 20px，也不會低于 10px。
這是clamp的基本用法。
如果您對clamp仍有疑問，可以參考 MDN 文檔。
接下來，我們在 CSS 中實(shí)現(xiàn)這個(gè)功能。
result的值根據(jù) var 的值而變化：
當(dāng) var 的值小于 100 時(shí)，結(jié)果的值為 10；
當(dāng) var 的值大于等于 100 時(shí)，結(jié)果變?yōu)?20。
如果我們用偽代碼描述這個(gè)問題，它應(yīng)該是這樣的：
let result;if(var < 100){result = 10} else {result = 20}
這個(gè)要求和clamp函數(shù)類似，但又不一樣。clamp可以將 var 的值限制在一個(gè)范圍內(nèi)，但我們現(xiàn)在希望結(jié)果的值是 10 或 20。
那我們怎么做？
有一個(gè)特殊的技巧：我們可以放大 var 的變化，使其值要么達(dá)到區(qū)間的上限，要么達(dá)到區(qū)間的下限。
于是：
let result = clamp(10, (var-99) * 20, 20)這會產(chǎn)生一個(gè)效果：
如果 var 的值為 99，則表達(dá)式變?yōu)椋篶lamp(10, 0, 20), takes 10.
如果 var 的值為 100，則變?yōu)椋篶lamp(10, 20, 20), takes 20.
用一張圖解釋：
同樣，如果我們希望：
當(dāng) var 的值小于 50 時(shí)，result的值為 5。
當(dāng) var 的值大于等于 50 時(shí)，result的值為 15。
我們只需要這樣寫：
let result = clamp(5, (var-49) * 15, 15)你有沒有注意到：這實(shí)際上是 if-else 的效果，我們做到了。
在 CSS 中切換顏色
回到最初的面試問題。
為了讓我們后面可以使用 CSS 進(jìn)行變量計(jì)算，我們需要將值放在一個(gè) CSS 變量中，所以 HTML 可以這樣寫：
<num style="--num:1">1<span>reads</span></num><num style="--num:99">99<span>reads</span></num><num style="--num:102">102<span>reads</span></num>
如果我們不需要考慮 HTML 語義或 SEO 因素，這里的“數(shù)字”和“讀取”都可以由偽元素生成：
<head><style>num::before {counter-reset: num var(--num);content: counter(num);}num::after {content: 'reads';}</style></head><body><div><num style="--num:1"></num><num style="--num:99"></num><num style="--num:102"></num></div></body>
如果對 content 和 counter-reset 不熟悉，可以查看 MDN 文檔。
content ：https://developer.mozilla.org/en-US/docs/Web/CSS/content
counter-reset：https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
具體的演示效果，可以通過以下地址查看：https://codepen.io/bytefishmedium/pen/VwQrGEb
棕色為#aa540e，用HSL顏色表示為hsl(27, 50%, 36%)，如下：
它的飽和度控制顏色的鮮艷程度。飽和度越高，顏色越鮮艷，飽和度越低，顏色越暗。當(dāng)飽和度降低到0時(shí)，就變成了完全的灰色，如下：
在灰色和棕色之間切換顏色，即在 hsl(27, 0%, 36%) 和 hsl(27, 85%, 36%) 之間切換。
于是就有如下代碼：
num{--s: clamp(0%,(var(--num) - 99) * 99%,85%);/* >100 */color: hsl(27 var(--s) 36%);}
最終的演示：https://codepen.io/bytefishmedium/pen/WNMXabm
總結(jié)
我們通過clamp函數(shù)在CSS中實(shí)現(xiàn)if-else效果，最后讓顏色根據(jù)變量的值進(jìn)行切換。
其實(shí)原面試題還有另外一部分，簡單來說就是：讓顏色在多個(gè)值之間切換。僅使用 if-else 不足以滿足此要求，有興趣的話，可以留言交流學(xué)習(xí)。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
