sass安裝
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.yiibai.com/sass/sass_installation.html
gem改源
gem官網(wǎng): https://rubygems.org/
gem改源: https://ruby.taobao.org/
Ps:mac自帶ruby gem救崔,ruby與gem的關(guān)系類似node npm绿贞,gem改源(改成國內(nèi)淘寶的鏡像芽狗,類似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: 系統(tǒng)去/usr/bin/sass安裝了痛垛,其實sass在/usr/local/bin/sass
關(guān)于報錯網(wǎng)上解釋
http://stackoverflow.com/questions/31443530/sass-error-installing
windows安裝(未試)
把** Sass 編譯成 CSS**
使用 Sass 的方法去創(chuàng)建樣式,最終需要把 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:將當(dāng)前目錄的index.scss編譯成index.css,放在當(dāng)前目錄
sass --watch ./:./
Ps:將當(dāng)前目錄的scss編譯成css朽寞,放在當(dāng)前目錄识窿,這樣不用每次都都去執(zhí)行sass命令,會自動監(jiān)聽變化并自動編譯
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