sass+compass起步

　　前言：Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.——《摘自sass官方文檔》

　　因此咱們使用sass+compass組合。（本文只講windows環境，由於工做電腦是WIN）

　　一、ruby環境安裝

　　sass依賴ruby環境，官網（http://rubyinstaller.org/downloads/）下載合適的版本的ruby，安裝時注意在選擇路徑的那一步勾選Add Ruby executables to your PATH.

　　二、sass安裝

　　在菜單中打開Start Command Prompt with Ruby，運行命令來安裝sass：

gem install sass   //安裝sass
sass -v            //查看sass版本號
sass -h            //查看sass命令

　　三、compass安裝

gem install compass  //安裝compass
compass version      //查看compass版本號

　　基本環節配置好以後就能夠小試身手了。

　　四、啓動項目

compass create <myproject>

　　會生成一個名爲<myprject>的文件夾，目錄結構以下：

　　五、編譯

　　compass是懶編譯——只編譯有改動的文件。

compass compile //手動編譯sacc文件爲css文件
compass watch   //監控scss文件，有改動的時候自動編譯爲css

　　剩下的事情就是熟悉sacc語法及compass的各大模塊，compass之於css就像jquery之於javascript，瞭解sacc基本語法以後，使用compass來幹活，事半功倍。

附錄：

一、compass基本命令：

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change
Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.
  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information

二、sacc中文文檔http://sass.bootcss.com/docs/sass-reference/

三、compass官方文檔http://compass-style.org/reference/compass/support/