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
/usr/local/bin/sass -v 查看版本
安装报错处理
➜ ~ 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
windows安装(未试)
把** 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
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