sass 安装
1.全局安装 sass 我的Mac 所以不用再安装Ruby ，直接在终端输入

 gem install sass

然后在终端中输入

sass -v

出现 Sass 3.4.8 (selective steve) ,表示安装成功。
sass的编译
1. 使用 sublime text 2
1.1 preferences-->PackageControl---> 输入 install package ----》输入 SassBuilder 安装插件完成
1.2 新建项目 ---》新建 my.scss
1.3 选择 sublime text 2 工具栏中的 tool---->sassbuilder config 然后保存为 .sassbuilder-config 保存到项目的根目录下，修改你的 .sassbuilder-config 中的输出生成.css 文件的路径

sass sublime text 2 gulp ionic
1.4 修改my.scss 保存，则在你.sassbuilder-config 中的输出生成.css 文件的路径下生成了my.css 文件的

2. 使用 gulp 有点大材小用的样子 O(∩_∩)O~~
2.1 安装 gulp
sudo npm install -g gulp
在终端中输入 gulp -v
出现 CLI version 3.8.10
表示安装成功。
2.2 回到你的新建的项目中 cd /yourproject/，将gulp 安装到项目的本地
在终端中输入
npm install —-save-dev gulp
2.3 在你的项目中跟目录下新建一个空的 package.json
2.4 安装你需要的依赖如
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
2.5 在你的项目中跟目录下新建一个 gulpfile.js
编写你的任务
如：

//包含gulp

var gulp = require('gulp');  

//包含我们的插件   

var jshint = require('gulp-jshint');

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

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var rename = require('gulp-rename');

var notify = require("gulp-notify");

//编译sass  

gulp.task('sass',function(){

    gulp.src('./sass/my.scss')

    .pipe(notify("scss build successful "))

    .pipe(sass())

    .pipe(gulp.dest('./style'));

});  

//拼接、简化JS文件   

gulp.task('scripts',function(){

    gulp.src('./js/*/js')

    .pipe(concat('all.js'))

    .pipe(gulp.dest('./dist'))

    .pipe(rename('all.min.js'))

    .pipe(uglify())

    .pipe(gulp.dest('./dist'));

});  

//默认任务

gulp.task('default',function(){

    gulp.run('sass','scripts');

    //监视我们JS文件的变化

    gulp.watch('./js/*.js',function(){

        gulp.run('scripts');

    });

    //监视scss文件的变化

    gulp.watch('./sass/*.scss',function(){

        gulp.run('sass');

    });

});

2.6
在终端中输入
gulp
2.7 新建你的sass 文件保存
发现在gulpfile.js 中输出.css文件的路径下生成了编译好的文件；

Koala

使用更加简单

http://www.cn-sass.com/%E6%95%99%E7%A8%8B/sass-gui-tool-koala.html

4. ionic sass 编译
http://learn.ionicframework.com/formulas/working-with-sass/
如果在 ionic setup sass 出现了错误，你可以看看这个连接
https://github.com/driftyco/ionic/issues/2241
主要是你没有安装 gulp 引起的错误安装一下就可以了

秒客网

sass sublime text 2 gulp ionic

Koala

相关文章