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

sass sublime text 2 gulp ionic的更多相关文章

  1. 我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……

    虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大 ...

  2. Sublime Text 3编译Sass - Sublime Text安装Sass插件

    1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...

  3. 开发者常用的 Sublime Text 3 插件

    1.官网下载 Sublime Text 3 (已有安装包的,请忽略) Sublime Text 官网下载地址 : http://www.sublimetext.com/ 2.打开 Sublime Te ...

  4. Sublime Text通过插件编译Sass为CSS及中文编译异常解决

    虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...

  5. Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件

    为sublime text 添加LESS语法高亮 功能:LESS高亮插件   下载   https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...

  6. Sublime Text 3 配置 sass

    先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369;  body {     backgroun ...

  7. Sublime Text 有哪些使用技巧

    1. 更改变量名的几种方法<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg&quo ...

  8. [转]The Best Plugins for Sublime Text

    Source: http://ipestov.com/the-best-plugins-for-sublime-text/ Good day, everyone! I tried to collect ...

  9. sublime text 前端开发插件安装和配置

    前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的 ...

随机推荐

  1. (VS) TFS lost mapping suddenly.

    家里的网络不是很稳定.今天突然发现 TFS 上所有的 mapping都突然没有了. 尝试去remapping,在Source Control Explorer 中右击源文件,然后选择 Advanced ...

  2. Platform Invoke

    PInvoke 允许managed code 来调用在DLL中实施的unmanged function. Platform invoke relies on metadata to locate ex ...

  3. [DHTML]什么是DHTML?

    DHTML 将 HTML.JavaScript.DOM 以及 CSS 组合在一起,用于创造动态性更强的网页. DHTML 总结 DHTML 只是一个术语,它描述了 HTML.JavaScript.DO ...

  4. DBA_Oracle Erp R12安装虚拟机镜像IP修正(案例)

    2014-07-12 Created By BaoXinjian

  5. jsPlumb

    官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/ 初始化 jsPlumb只有等到DOM初始化完成之后才 ...

  6. 转_IOS开源

    http://www.csdn.net/article/2013-06-05/2815530-GitHub-iOS-open-source-projects-one 苹果App Store本身所具有的 ...

  7. filter的执行顺序

    一直没有仔细去研究下filter ,最近系统的测试了下: 先看代码吧 FirstFilter.java ================== package com.test.filter; impo ...

  8. SOA 与 DDD

    SOA是技术架构方面,Evans DDD则是哲学方法论方面,所属方向不一样,或者说两者非常的无关.甚至是两个不同方向.使用DDD可以将系统从无到有到大建立起来,而大到一定程度,就需要SOA,整合异构. ...

  9. dede织梦列表页如何调用全站子栏目

    网站原代码:{dede:channel type='son'} <a href="[field:typelink/]">[field:typename/]</a& ...

  10. Ulipad和有道词典冲突的问题

    Ulipad和目前版本的有道词典有冲突,表现为先开有道词典,Ulipad就无法运行. 解决方法是:找到Ulipad安装目录下的config.ini,添加以下两行:   [server] port=50 ...