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. 黄聪:百度知道中对HTML字符实体、字符编号,&开头字符的使用

    http://www.w3school.com.cn/tags/html_ref_entities.html 带有实体名称的 ASCII 实体 结果 描述 实体名称 实体编号 " quota ...

  2. mysql索引之四(索引使用注意规则:索引失效--存在索引但不使用索引)

    但是如果是同样的sql如果在之前能够使用到索引,那么现在使用不到索引,以下几种主要情况: 1. 随着表的增长,where条件出来的数据太多,大于15%,使得索引失效(会导致CBO计算走索引花费大于走全 ...

  3. iOS 审核加急通道使用--转载来源--有梦想的蜗牛

    提交完成后进入加急审核页面. 链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在i would lik ...

  4. Python中if __name__ == "__main__": 的作用

    在很多python脚本中在最后的部分会执行一个判断语句if __name__ == "__main__:",之后还可能会有一些执行语句.那添加这个判断的目的何在? 在python编 ...

  5. Android 2.3 NFC简介

    Android 2.3加入了NFC(近场通讯)的支持.官网developer.android.com的英文介绍如下:Near Field Communications (NFC)Android 2.3 ...

  6. C++学习38 string字符串的增删改查

    C++ 提供的 string 类包含了若干实用的成员函数,大大方便了字符串的增加.删除.更改.查询等操作. 插入字符串 insert() 函数可以在 string 字符串中指定的位置插入另一个字符串, ...

  7. [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法

    在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...

  8. [ActionScript 3.0] Away3D 天空盒(skybox)例子

    /* SkyBox example in Away3d Demonstrates: How to use a CubeTexture to create a SkyBox object. How to ...

  9. Intellisense for Xrm.Page in CRM 2011

    Intellisense for Xrm.Page in CRM 2011 In CRM 2011 javascripts for crm forms can be stored externally ...

  10. buildbot 自动启动

    buildbot的master或者slave,一般配置好了之后, 总希望永久可用,即使机器因为某些原因重启了,也会自动启动. 官网文档不推荐使用root启动master. 而是使用用户级别的cront ...