CSS的未來發展方向

　　什麼時候普通的CSS才能優秀到替代Sass, Less, Stylus, 以及 rest？

 

　　Web開發人員必須要面對的最艱難的一個事實是大多數人在瀏覽網站的時候使用的還是老版本、低功能的瀏覽器。瀏覽器一直在增加新的功能，但你通常沒辦法使用這些功能，除非你願意失去大量沒有更新瀏覽器的用戶。

　　當你使用 Electron 開發應用程式的時候就不存在這個問題了。因為你寫的Electron應用的程式碼運行在一個獨立的 Chromium 瀏覽器上。 Chromium 是Google瀏覽器的核心引擎，由Google提供技術支援。同時，它也是開源的，這意味著社群中大量的開發者每天都在優化它。

　CSS 自訂屬性

# 　　上週，Electron 發布了一個支援CSS自訂屬性的新版本。如果你使用過類似 Sass 和 Less 的預處理語言，你可能已經很熟悉變數了，它們允許你定義可重複使用的值，用於配色方案或佈局等。變數可以讓你的樣式表保持 DRY (Don't Repeat Yourself)，並且提高可維護性。

　　由於CSS的自訂屬性只是CSS的常規屬性， 因此它們可以透過JavaScript來操作。這微妙但強大的功能，使開發者在享受CSS硬體加速的同時可以動態地改變視覺介面，並能夠減少前端程式碼和樣式表之間的重複。

　　下面是一個使用自訂屬性的範例：

:root {  
    --primary-color: papayawhip;  
    --base-line-height: 1.4;
} 
.thing {  
    color: var(--primary-color);  
    margin: 0 0 calc(var(--base-line-height) * 1rem);
}

　　查看 在Google瀏覽器的示範 (需要chrome版本高於49)

　CSS 混合(Mixin) 和 繼承

　　現在，我們的CSS中有變數了。這很不錯了，但它並不足夠讓我們寫出完美的CSS。我們真正需要的是一種可以寫可重複使用的CSS的方式。在 Sass, Less 以及 Stylus 這些功能早就存在了，但是在常規CSS中卻沒辦法實現。

　Enter the @apply Rule

　　Google的某人 正在開發一套新的規格：

此規範定義了@apply規則，它允許開發者在一個命名變數中儲存一組屬性，然後在其他樣式規則中的參考。

# 　　下面是一個使用@apply規則的範例：

body {  
    --alert: {    
        color: white;    
        padding: 15px;    
        margin: 1rem 0;    
        border-radius: 6px;  
    }
} 
.alert-success {  
    @apply --alert;  
    background-color: olivedrab;
}
.alert-warning {  
    @apply --alert;  
    background-color: firebrick;
}

　　在寫這篇文章時(2016年4月8日)，這個功能仍舊非常新，並沒有被谷歌瀏覽器甚至 Chrome Canary 支持，但是在最新的 Chromium nightly 中通過啟用標記(flag)是可以實現的。

　　自己來嘗試@apply規則的話， 可以先下載最新的Chromium，然後從透過啟用標記來實現@apply。以下是在 OS X系統中的做法：

/Applications/Chromium.app/Contents/MacOS/Chromium \  --enable-blink-features=CSSApplyAtRules

　　查看以上規則所有組合出來的酷炫樣式，可以參考我的 codepen 示範:

　　@apply 在Chromium瀏覽器上的 Codepen 示範

　從現在開始寫未來的CSS

　　一旦@apply被Chromium 和 Electron所支持，我們就能夠使用原生CSS編寫乾淨可維護的樣式。但在那一天到來之前，我們仍然需要不斷地學習預處理器來填補這些空白。

　　現在有至少兩個項目可以讓你寫未來的CSS: Myth 和 cssnext。在這兩個專案中，cssnext 更加活躍，甚至有一個專門的git issue來促進 @apply 的實現 (譯者註: 最新版本的 postcss-cssnext 已經支援 @apply 規則)。

　　以上就是CSS的未來。

以上是CSS的未來發展方向的詳細內容。更多資訊請關注PHP中文網其他相關文章！