css 預處理器實現 css最佳實踐的 最佳實踐是什麼？

預處理器實現 css 最佳實踐的最佳實踐…… 是什麼 請舉例說明~

單類如何做到多類那樣的靈活性 單類真的可行嗎？~

我們用的最佳實踐也就下面這個了。但是用預處理器意味著你需要依賴構建工具，在項目頁面比較多的請客下這個帶來的工作量也是不小的
手機端的rem 與視覺稿px的換算問題
在純css的情況下你需要通過視覺稿px手動計算出rem的值

.container{
width:1.20rem
}


在使用預編譯的情況下

就可以寫一個函數來做換算

.container{
width: pxtorem(240)
}


等價的stylus的例子

add(a)
a/2/100rem

謝邀 @Suscc。

實現不懂誒，隨便說說吧。（捂臉）

================分割線==========================

css預處理很多，我只用過 sass 和 less，具體它們怎麼實現的，我並沒有研究過。我只是個用戶罷了。以下很多東西來自於之前的經驗，並沒有仔細驗證過，如果錯誤，請不吝指出。謝謝。

css 預處理器的出現是為了解決 css 沒有編程能力這個大 bug。為什麼說它沒有編程能力？讓我們來想想學習一門語言最開始接觸的是什麼？ 類型，變數，表達式，流程式控制制。然而這些 css 都沒有。這就帶來了一個問題，你沒法用真正的編程語言的方式書寫css。比如這樣。

$bg-color: #aaa;
.container {
background-color: $bg-color;
}
.panel {
color: $bg-color;
}


你只能這樣寫

.container {
background-color: #aaa;
}
.panel {
color: #aaa;
}


變數的方便之處不用講了吧。

還有其他的痛點，比如不能嵌套，不支持函數，等等。這些讓人無奈的地方，經歷過手寫 css 而且是多人寫作的大項目的，都不會陌生。

所以我們需要預處理器，為 css 擴展編程的能力，讓它更好的為我們服務。

下面是自己做的 react-starter-kit 集成了 webpack 以及 sass，如果你對 webpack 和 react 有了解，可以試試。