Sass助力騰訊：劉炬光譯者序

剛剛過去的2013年，被稱為中國網際網路金融發展的元年，O2O概念火遍大江南北。QQ自然不甘落後，整個2013年我都在負責QQ查詢的商業化推進。來自上層的壓力以及各方的重視，使QQ查詢始終以每週最少一個版本的速度快速迭代。一段時間下來，我們發現CSS變得越來越臃腫，不可維護和冗餘程式碼越來越多。

之前很早就在社群瞭解到了Sass和Compass的存在，但沒有形成意識上的重視。一直以來手寫靜態CSS的思維習慣，使得自己並沒有看到通過框架來動態建立樣式的巨大優勢，甚至認為Sass和Compass是非常呆笨的，是給不會CSS的人來使用的。但面對日益龐大的CSS程式碼，尋找一個有效的技術解決方案就變得非常必要了。

深入之後，才發現自己之前的想法完全錯了。Sass並不能讓你寫出更好的CSS，但是卻可以讓你更高效地寫出高可維護性的CSS。這句話怎麼理解呢？ 如果你本身對CSS一無所知，那麼Sass並不能幫助你實現從菜鳥到CSS大師的轉變，Sass的使用建立在你對CSS有一定了解的基礎上，它有著一系列令人激動的特性。全面而詳細的特性介紹自然需要讀者去詳讀此書，這裡我只挑QQ查詢受益頗深的幾點分享給大家。

• Sass對原生CSS @import指令的擴充套件，讓我們可以將分佈在不同檔案中的樣式最後合併到一起，這樣通過把樣式分散到多個更小的檔案中，整個CSS的結構立馬變得更加清晰了。
• 變數機制，使得標準的顏色值、行高、列寬再也不用“東一榔頭西一棒槌”地分散各處，有了一個統一的地方歸納整理。設計師哪天想變，只需要修改一處即可，省力又省心。
• 標準樣式的抽離，像呼叫函式一樣，輕鬆將統一的樣式抽離出來，避免了拷貝來，拷貝去，一旦互動變動， 只需要修改抽離出來的混合器一處。
• 樣式繼承的概念，使得我們對於查詢中各種btn的修飾變得清晰，無論何種btn，統一從父級btn繼承基礎樣式。
• 自動合圖實在是太方便了，直接把切圖扔到圖片目錄，對應的合圖和CSS就全部自動生成了。

諸如此類的好處實在太多， 留待各位讀者通過閱讀本書學習和應用吧。

好風憑藉力，送我上青雲。自從引入了Sass和Compass，QQ查詢的樣式維護成本大幅下降，給我們帶來了莫大的好處。

抱著對Sass和Compass深深的愛與感激，在2013年上海W3CTech的分享大會上，我作為嘉賓重點分享了Sass和Compass，也正是這樣一個機會，讓我有幸最終結識了李鬆峰老師。他一直關注國際前沿技術的最新發展，總希望把最先進最好的東西帶給國內的開發者。他非常認可Sass和Compass的發展思路，促成引進了《Sass與Compass實戰》這本書。當李老師找到我說想請我翻譯這本書的時候，我便一口應允下來，並承諾全力以赴，國內現在太缺少這樣一本全面介紹Sass和Compass的書籍了。

感謝李鬆峰老師對本書提出的修改意見，感謝李靜老師對本書最後審定和出版付出的努力。

最後，如果讀者是初次接觸Sass和Compass，我相信這本書一定可以為你打下非常堅實的語言基礎，使你進入這一新的技術領域。即便你已經寫了很多年Sass了，本書也一定能夠加深你對Sass和Compass高階特性的理解，從而把它們更好地應用到你的專案中。

劉炬光
2014年3月4日

劉炬光-materliu 騰訊Web前端工程師，騰訊AlloyTeam核心成員，熱愛HTML5 WebApp開發, 在客戶端結合的WebApp開發上有非常豐富的經驗。注重開發流程自動化，主導所在團隊的web開發自動化工作。是國內最早接觸sass和compass的程式設計師，曾在w3ctech等大會上向大家推薦，教授使用sass和compass。

千萬級吞吐WebApp（劉炬光）