CSS 預處理器是一個非常出色的工具，但是它們的變量是靜態的，有語法作用域。Native CSS 變量，從另一面來看，它們是一個完全不同類型的變量：因為它們是動態的，他們的作用域是DOM，事實上，這也是困惑該不該稱他們為變量，它們實際上是CSS 屬性，這也給了他們一個機會，來解決這個功能完全不同的問題。
在這篇文章中，我將討論一些CSS 自定義屬性這個功能，而且不用CSS 預處理器來做。當然我還演示一些新的設計模式，自定義功能的啟用。文章最后討論一下，我認為在未來最有可能的是預處理變量和自定義變量一起使用，兩個東西取長補短，珠聯璧合。
預處理器變量的限制
在繼續寫之前，我想強調的是，我真的很喜歡CSS 預處理器，我的所有項目都在使用它。預處理器做了一件非常了不起的事情，即時你知道他最終出來的就是原始的CSS，任然可以感受這個神器的時代。
任何工具，都有他的局限性，有一個炫酷的外觀會讓人驚喜而忽略了其中的限制，特別是新用戶。
Preprocessor variables aren’t live
也許受預處理限制，在媒體查詢中，最常見的新手也無力吐槽定義變量或使用@extend
如果你編譯上面的代碼，你得到是：
如你所見，媒體查詢被廢棄，變量賦值被忽略。
從理論上講，雖然sass 負責申明條件變量，但這樣做也是一個挑戰，枚舉所有Permutations—exponentially 會增加CSS的最終大小。
預處理器變量不能級聯（層疊）
每當你使用變量，作用域的范圍不可避免，這個變量應該全局嗎？應該是file/module？還是塊作用域？
CSS 最終是為HTML的樣式，事實證明還有另外一種有用的方法是變量的范圍：DOM 元素，但是preprocessors不能運行在瀏覽器且從未看見標記。
參考一個網站，試圖給<html> 的元素添加一個 class user-setting-large-text 他們更傾向于更大的文本大小 。
一旦這個class設置，更大$font-size變量賦值就會運用：
