Sass學習之路：Sass、Compass安裝與命令行

導言

CSS不是一門真正意義上的編程語言，不少編程語言理所固然的特性（好比變量），都不被支持。同時再開發模塊化的web項目的時候，也要避免相互干擾。爲了彌補CSS的這些不足，就產生了CSS預處理器，Sass則是其中的佼佼者。

什麼是Sass

Sass是最成熟、穩定、強大、專業的CSS擴展語言（官方解釋）。直白點，Sass就是一個很是好用的CSS預處理器，爲css引入部分編程語言的特性。

Sass在現階段，有兩種編碼的語法，一個是兼容CSS語法的Scss格式文件，一個是Haml、Ruby相似語法的Sass格式文件。通常狀況下，咱們選用第一種兼容Css語法的Scss文件格式

什麼是Compass

Compass是基於Sass的一個css創做框架，其實就是基於Sass提供了不少很是實用的函數，有點類庫的概念。

如何安裝

Sass是基於Ruby寫的，安裝Sass須要先安裝Ruby：https://www.ruby-lang.org/zh_cn/downloads/。

在Windows上安裝Ruby，須要藉助RubyInstall工具：http://rubyinstaller.org/

安裝好Ruby只有，可使用cmd：ruby -v 查看ruby的版本，若是有輸出，表示ruby安裝成功。這個時候，則可使用ruby gem sass來安裝Sass，ruby gem compass來安裝Compass。

注意事項：因爲gem倉庫被牆了，若是想使用的話，須要切換鏡像地址，國內能夠採用淘寶的ruby鏡像：http://ruby.taobao.org。能夠經過以下命令實現：

//移除官方gems
gem sources --remove https://rubygems.org/
//添加淘寶的gems   
gem sources -a https://ruby.taobao.org/
//查看現有的gems
gem sources -l

命令行

//編譯Sass
sass <sass file> <css file>

//Sass與Scss相互轉換
sass-convert <.sass file> <.scss file>
sass-convert <.scss file> <.sass file>

//監視Sass文件變動，自動編譯(可選輸出css的風格，參數爲style)
sass --watch <sass file>:<css file> [--style [nested|expanded|compact|compressed]]

//監視文件夾中Sass文件變動，自動編譯
sass --watch <sass folder>:<ouput css folder>

//----------------------Compass--------------

//建立Sass工程
compass create

//編譯sass文件
compass compile

//監視Sass工程下sass文件變動(可選輸出css的風格，參數爲output-style)
compass --watch [--output-style [nested|expaned|compact|compressed]]

更簡單的使用方式

看了以上這麼多的步驟，是否是感受頭疼？

老夫看你天資聰慧，未來必成大器，特爲你帶來一本祕籍，祝你早日功成！

在真正的開發環境中，咱們通常這麼用，結果node+gulp等構建工具。

首先，須要安裝node,而後使用npm安裝gulp和gulp-sass。

接着，編寫一個基於gulp的構建腳本，若是是其餘構建工具，那麼編寫對應的腳本便可，gulpfile.js代碼以下：

var gulp = require('gulp'),
  sass = require('gulp-sass');

gulp.task('default', ['sass', 'watch'], function () {
  console.log('Begin watching...');
});

gulp.task('sass', function () {
  return gulp.src('./*.scss')
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});

gulp.task('watch', function () {
  return gulp.watch('./*.scss', ['sass']);
});

最後，使用控制檯，啓動gulp，而後暢快的編寫sass代碼吧。