安装sass 及编译

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