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日)，這個功能仍舊非常新，並沒有被Google瀏覽器甚至 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的未來。