sass安裝

http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.yiibai.com/sass/sass_installation.html

gem改源

gem官網： https://rubygems.org/
gem改源： https://ruby.taobao.org/
Ps：mac自帶ruby gem，ruby與gem的關系類似node npm，gem改源（改成國內淘寶的鏡像，類似cnpm），Windows下需要先安裝ruby，gem不需要單獨安裝，ruby帶了gem。

gem安裝sass

http://www.haorooms.com/post/sass_css
http://www.w3cplus.com/sassguide/install.html

Mac下 gem 安裝 sass

sudo gem install -n /usr/local/bin sass

Paste_Image.png

/usr/local/bin/sass -v 查看版本

Paste_Image.png

安裝報錯處理

? ~ sudo gem install sass
Fetching: sass-3.4.23.gem (100%)
ERROR: While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass
? ~ which sass
/usr/local/bin/sass
ps: 系統去/usr/bin/sass安裝了，其實sass在/usr/local/bin/sass

關于報錯網上解釋

http://stackoverflow.com/questions/31443530/sass-error-installing

Paste_Image.png

windows安裝(未試)

http://ninghao.net/video/2096

把** Sass 編譯成 CSS**

使用 Sass 的方法去創建樣式，最終需要把 Sass 編譯成普通的 CSS，這樣才能在瀏覽器上去使用。編譯 Sass 有很多的方法，有一些圖形界面的工具，也可以通過命令行去編譯 Sass。
https://ninghao.net/video/2098

命令行去編譯

cd ~/mq-work/dodder/develop/app/Goddess/css
Ps:去scss所在目錄
sass ./index.scss:./index.css
Ps:將當前目錄的index.scss編譯成index.css，放在當前目錄
sass --watch ./:./
Ps:將當前目錄的scss編譯成css，放在當前目錄，這樣不用每次都都去執行sass命令，會自動監聽變化并自動編譯

phpstrom 配置scss

com+ , => Tools => File Watchers => 勾選scss

Paste_Image.png

gulp-sass

https://www.npmjs.com/package/gulp-sass
https://ninghao.net/video/2014

npm install gulp-sass --save-dev

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');

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

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

初接觸 Sass 與Compass 遇到的幾個坑
https://devework.com/sass-compass.html
Compass用法指南
http://www.ruanyifeng.com/blog/2012/11/compass.html