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 文件的路径


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文件的路径下生成了 编译好的文件;

3.

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 引起的错误 安装一下就可以了

最新文章

  1. Kali v2.1.2 for Raspberry Pi 3B
  2. [No00007E]2016-面经[中]
  3. ListView 的使用
  4. date时间函数
  5. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
  6. WordPress建站指南
  7. Eclipse卸载插件
  8. blend 从无到有系列之添加自定义Rectangle样式指定到资源文件
  9. 修改ECSHOP注册只需要email,并且使用email作为账号
  10. 使用Eclipse搭建C/C++开发环境(转)
  11. Python Tcp Socket
  12. leetcode第一题--two sum
  13. linode digitalocean哪个更好
  14. 透视I/O多路复用
  15. 少年,是时候换种更优雅的方式部署你的php代码了
  16. C简单实现动态顺序表
  17. Xcode7.2中如何添加一个Empty Application模板
  18. 7.STM32中GPIO理解
  19. javascript中Ajax的简单封装
  20. Positioning

热门文章

  1. DBA_Oracle Erp R12中文补丁安装升级(案例)
  2. GL_GL系列 - 多币种管理分析(案例)
  3. Codeforces Round #366 (Div. 2) C Thor(模拟+2种stl)
  4. studio_ 优化Android Studio 启动、编译和运行速度?
  5. CSS媒体查询,CSS根据不同的分辨率显示不同的样式
  6. AES对称加密算法原理(转载)
  7. php 获取时间今天明天昨天时间戳
  8. iPhone开发之UIScrollView初步
  9. Web Service 性能测试工具比较
  10. DEDE5.7如何制作网站地图?