Campass + Scss ,讓咱們更優雅的編寫CSS

若是你常常寫CSS，你應該會發現傳統的CSS編寫方式或多或少有些枯燥，不智能？ 不優雅？ 至少我是這麼認爲的。

缺陷舉例

1. 假設頁面中有大部分HTML元素的背景顏色值是同樣的,  咱們就須要爲各個元素加上 background-color:#fff 這樣重複的CSS代碼，固然，你也能夠經過單獨定義一個class, 爲這個class設定 background-color:#fff, 而後把class應用到你想要到的HTML元素上，若是運用的合理，還算說的過去，不然結果就是你的HTML元素上面可能有不少個class, 在我看來這個很醜陋.

2. 假設你的HTML元素有好多層, 你須要爲每層編寫一些CSS, 結果可能會是

    .div1{ width: 800px;}

    .div1 .div1-1{width: 600px;}

    .div1 .div1-1 .div1-1-1{width:400px;}

    .div1 .div1-1 .div1-1-1 .div1-1-1-1{ width: 200px; }

    寫到第四層, 我就已經感到有點枯燥了，由於我要重複的去把父元素包含進去, 並且後期也很很差維護

 

正由於如今的傳統方式有種種的缺陷，因此誕生了scss, 參照官網 http://sass-lang.com/ 查看詳細的介紹，簡單的說，這個就是個編寫CSS的框架，經過約定的語法來更智能的編寫CSS

使用

1. 由於要依賴於ruby環境，因此若是你用的是Windows系統, 首先請下載 RubyInstaller,, http://www.rubyinstaller.org/

2. 安裝完後, 若是你是win 8系統，請經過搜索並運行 'command prompt with Ruby'

3. 命令輸入 gem install compass , 表示要安裝 compass 框架, compass是個很方便的編寫CSS的框架, 稍後再介紹，有興趣請參見官網 http://compass-style.org/