今天看到@Dennis Gaebel分享的一篇博文。覺(jué)得很有意思。同時(shí)感覺(jué)老外分享出來(lái)的東西就是不一樣，盡管自己也專門整整CSS，但從新特性的發(fā)掘和敏銳性就差十萬(wàn)八千里。
不吐槽了，還是回到正題來(lái)吧。
眾所周知，CSS是不具備類似其他程序語(yǔ)言一樣的特性，沒(méi)有邏輯性而言。他就是一門描述性語(yǔ)言（暫時(shí)把她稱作語(yǔ)言吧）。因此才會(huì)有各式各樣的CSS處理器出來(lái)，比如較為流行的Sass，LESS和Stylus。當(dāng)然還有近年最強(qiáng)大的PostCSS，在項(xiàng)目中使用PostCSS能將你帶入到一個(gè)全新的CSS世界，至于原因是什么，暫且不在這里闡述。
使用過(guò)CSS處理器的同學(xué)應(yīng)該知道，在CSS處理器中最常見(jiàn)的幾個(gè)特性是變量、混合宏、擴(kuò)展、嵌套、運(yùn)算以及一些簡(jiǎn)單的邏輯運(yùn)算。經(jīng)過(guò)多年的沉淀，這些特性開(kāi)始嘗試在CSS中使用。比如下面我們將要說(shuō)的幾個(gè)特性，就是CSS自身已具備或?qū)⒁邆涞念愃朴贑SS處理器的特性。
變量是CSS處理器最基本的特性之一，它能類似于其他的程序語(yǔ)言一樣。通過(guò)變量讓我們的代碼變得更好維護(hù)和管理。比如說(shuō)給項(xiàng)目定制多道主題之時(shí)，變量特性就顯得很強(qiáng)。
對(duì)于CSS自身而言，他承接CSS處理器眾多特性之一變量。只是使用的方式略有差別，咱們先來(lái)看Sass中的變量聲明方式和調(diào)用方式：
$spacing-unit: 20px;main { margin: $spacing-unit; padding: $spacing-unit;}在Sass中通過(guò)$聲明一個(gè)變量。在CSS中是這樣來(lái)聲明變量的：
:root { --primary-color: skyblue;}nav.primary { background: var(--primary-color);}從上面的代碼中可以看出。在CSS中是通過(guò)前綴--來(lái)聲明一個(gè)變量，如果將變量放置在:root中，代表其聲明的是一個(gè)全局變量，如果將其放置在某個(gè)CSS代碼塊中，表示聲明的局部變量。使用的時(shí)候，借助var()函數(shù)來(lái)調(diào)用已聲明的變量。在var()函數(shù)中可以接受兩個(gè)參數(shù)：
div { color: var(--my-var, red);}第一個(gè)參數(shù)代表變量名，第二個(gè)參數(shù)指變量的默認(rèn)值。也就是說(shuō)，如果未顯式的聲明--my-var這個(gè)變量，那么通過(guò)var()臨時(shí)聲明了這個(gè)變量，而且這個(gè)變量的值是red。
到整理這篇文章之時(shí)，CSS變量得到了眾多主流瀏覽器的支持，而且使用的場(chǎng)景也特別的多，比如在動(dòng)畫中。這里只是簡(jiǎn)單的介紹了一下CSS變量的簡(jiǎn)單使用，有關(guān)于這方面的詳細(xì)介紹，可以閱讀早前整理的相關(guān)文章。
在CSS處理器中另一個(gè)特性就是混合宏?；旌虾曜顝?qiáng)的特性就是可以方便你引用一個(gè)代碼塊。同樣的我們先來(lái)看Sass中的混合宏。
在Sass中通過(guò)@mixin關(guān)鍵詞來(lái)聲明一個(gè)混合宏，然后通過(guò)@include來(lái)調(diào)用已聲明的混合宏：
@mixin font-size($size, $base) { font-size: $size; font-size: ($size / $base) * 1rem;}body { @include font-size(14, 16);}這段代碼編譯出來(lái)的CSS:
body { font-size: 14px; font-size: .875rem;}上面創(chuàng)建了一個(gè)font-size的混合宏，并且給這個(gè)混合宏傳遞了兩個(gè)參數(shù)$size和$base。而這個(gè)混合宏的功能就是計(jì)算font-size的值。讓不支持rem的瀏覽器采用px作為單位值，對(duì)于支持rem的瀏覽器采用rem的單位值。
而CSS中同樣可以有混合宏的特性，只不過(guò)現(xiàn)在支持的瀏覽器很少，僅在Chrome瀏覽器中。而且還需要開(kāi)啟Chrome瀏覽器相關(guān)配置：
咱們假設(shè)你的Chrome瀏覽器已根據(jù)上圖的顯示一樣配置好了相關(guān)設(shè)置(把chrome://flags/#enable-experimental-web-platform-features復(fù)制到瀏覽器URL地址欄)，接下來(lái)咱們看怎么聲明和調(diào)用聲明好的混合宏：
:root { --pink-theme: { background: #f64778; }}body { @apply --pink-theme;}編譯出來(lái)的CSS：
body { background: #f64778;}CSS的混合宏聲明有點(diǎn)類似于變量的聲明，只不過(guò)在里他是一個(gè)代碼塊，然后使用@apply規(guī)則（類似于Sass中的@include關(guān)鍵詞）調(diào)用已聲明好的混合宏。
在CSS處理器中可以進(jìn)行簡(jiǎn)單的一些數(shù)學(xué)運(yùn)算，比如說(shuō)加減乘除之類。那么在CSS中其實(shí)也有類似的計(jì)算功能。此時(shí)，我想大家應(yīng)該馬上想到了calc()函數(shù)。如此說(shuō)來(lái)，這個(gè)也算是CSS帶有的CSS處理器特性之一的話，那它比CSS變量特性還要更早。我想大家應(yīng)該也在項(xiàng)目中或多或少的使用過(guò)：
nav { margin: calc(1rem - 2px) calc(1rem - 1px);}這里咱們看不出計(jì)算出來(lái)的值是多少，其實(shí)瀏覽器會(huì)自動(dòng)根據(jù)表達(dá)式計(jì)算出其值。特別是CSS具有變量的特性之后，calc()使用的越來(lái)越頻繁。
.colorful { --translation: 10; transform: translateX(calc(var(--translation) * 1vw)) translateY(calc(var(--translation) * 1vh)); filter: hue-rotate(calc(var(--translation) * 4.5deg)); will-change: transform, filter; transition: transform 5000ms ease-in-out, filter 5000ms linear;}我想大家使用CSS處理器嵌套的時(shí)候，應(yīng)該感覺(jué)到了非常的爽。當(dāng)然嵌套要是沒(méi)用好，反而得到不佳的效果。我看到過(guò)有同學(xué)無(wú)限層次的嵌套，結(jié)果編譯出來(lái)的CSS簡(jiǎn)值無(wú)法讓人接受。
同樣的，先來(lái)看Sass的嵌套：
ul { margin: 20px auto; li { font-size: 12px; } a { text-decoration: none; }}我想，大家也希望能在CSS中具備類似的嵌套特性吧。@Tab Atkins提出過(guò)CSS原生的嵌套。CSS的嵌套其實(shí)將有可能類似于Sass這樣的嵌套。只不過(guò)Sass需要編譯，而CSS的嵌套不需要編譯就能直接被瀏覽器識(shí)別渲染。
不過(guò)大家要注意，不管是CSS的處理器，還是CSS自身即將具備的嵌套功能，在使用的時(shí)候都需要注意。因?yàn)槭褂们短资怯酗L(fēng)險(xiǎn)的，建議任何嵌套不要超過(guò)三級(jí)。當(dāng)然，在Sass中可以通過(guò)@at-root跳出嵌套，或者通過(guò)自定義的函數(shù)也能實(shí)現(xiàn)跳出嵌套。在此也希望在CSS的嵌套中也能具備類似的特性，如果一來(lái)，為了維護(hù)更好的代碼塊，就算是嵌套層級(jí)深，也能跳出層級(jí)關(guān)系。只不過(guò)話說(shuō)回來(lái)，CSS嵌套不需要編譯，提供如此特性似乎又有點(diǎn)多余了。(我自己在YY而以)。
在Sass中可以使用@extend擴(kuò)展已聲明的任何類代碼塊或者通過(guò)%聲明的占位符：
.message { border: 1px solid #ccc; padding: 10px; color: #333;}.success { @extend .message; border-color: green;}.error { @extend .message; border-color: red;}.warning { @extend .message; border-color: yellow;}上面的代碼編譯出來(lái)是什么我想大家都知道了。不同狀態(tài)繼承了.message的基本樣式，只不過(guò)在不同的狀態(tài)重置了border-color。
同樣的，到目前為止還沒(méi)有任何瀏覽器支持類似Sass這樣的擴(kuò)展規(guī)則特性。但@Tab Atkins已提出相關(guān)的建議。或許有一天，CSS的擴(kuò)展規(guī)則也類似于Sass中的擴(kuò)展規(guī)則。
CSS處理器提供了很多個(gè)顏色函數(shù)。可能通過(guò)這些函數(shù)計(jì)算出顏色新值。在CSS中，也將具備這方面的特性。@Erik Jung寫了一篇文章來(lái)介紹CSS Color Module Level 4特性。介紹color-mod()函數(shù)來(lái)計(jì)算顏色。另外@Ahmad Shadeed分享了如何使用rgba()模擬出color-mod()函數(shù)特性。
更為強(qiáng)大的是，@Tyler Gaw使用React寫的ColorMe，演示了color-mod()函數(shù)如何基于一個(gè)顏色，在不同條件下的變化。
下面代碼簡(jiǎn)單演示了color-mod()函數(shù)的使用方式：
nav { background: color-mod(#79d3e2 hue(360) saturation(100%));}代碼具體代表什么意思，如果你感興趣的話，可以閱讀《使用color-mod()函數(shù)修改顏色》一文。
從使用多年CSS處理器經(jīng)驗(yàn)來(lái)說(shuō)，CSS處理器的確幫助我解決了很多問(wèn)題，也讓自己編碼效率得到提高。如果能將CSS處理這些優(yōu)秀的特性移植到CSS規(guī)范中來(lái)，而不需要工具來(lái)編譯的話，我們會(huì)更喜歡。當(dāng)然這些CSS處理器的發(fā)展給CSS規(guī)范提供新思想和方法。
最后我希望向大家呈現(xiàn)這些新特性，能激發(fā)你在自己的工作中使用它們，并且在使用過(guò)程中發(fā)現(xiàn)其中不足之處，并把相關(guān)建議提供給CSS的規(guī)范小組，讓CSS變得越來(lái)越強(qiáng)大，越來(lái)越好使。
如需轉(zhuǎn)載，煩請(qǐng)注明出處：https://www.w3cplus.com/css4/6-preprocessor-features-coming-to-native-CSS.html
聯(lián)系客服
