sass sublime text 2 gulp ionic
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的更多相关文章
- 我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……
虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大 ...
- Sublime Text 3编译Sass - Sublime Text安装Sass插件
1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...
- 开发者常用的 Sublime Text 3 插件
1.官网下载 Sublime Text 3 (已有安装包的,请忽略) Sublime Text 官网下载地址 : http://www.sublimetext.com/ 2.打开 Sublime Te ...
- Sublime Text通过插件编译Sass为CSS及中文编译异常解决
虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...
- Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件
为sublime text 添加LESS语法高亮 功能:LESS高亮插件 下载 https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...
- Sublime Text 3 配置 sass
先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369; body { backgroun ...
- Sublime Text 有哪些使用技巧
1. 更改变量名的几种方法<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg&quo ...
- [转]The Best Plugins for Sublime Text
Source: http://ipestov.com/the-best-plugins-for-sublime-text/ Good day, everyone! I tried to collect ...
- sublime text 前端开发插件安装和配置
前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的 ...
随机推荐
- 黄聪:WordPress 多站点建站教程(六):使用WP_Query、switch_to_blog函数实现获取子站点分类中的文章
首先在你使用主题的funtions.php里面添加下代码: //根据时间显示最新的分类文章内容,每个站点显示一篇内容 //$blog_id 子站点ID //$catid 分类ID wp_reset_q ...
- solr基于jetty容器配置后台登陆角色用户名密码
solr版本4.0.0 我的solr下载后解压在d盘,你的随意. 在D:\apache-solr-4.0.0\apache-solr-4.0.0\example\etc目录下新建role.proper ...
- DBA_Oracle PFile and SPFile文件的管理和使用(案例)
2014-08-25 Created By BaoXinjian
- OAF_EO系列3 - Initialize详解和实现(案例)
2014-06-14 Created By BaoXinjian
- ZOJ 3601 Unrequited Love 浙江省第九届省赛
Unrequited Love Time Limit: 16 Seconds Memory Limit: 131072 KB There are n single boys and m si ...
- TNT平台
1, TNT平台 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! TNT平台中的开发平台是基于微软Jupiter平台的快速开发工具,开发者可以通过界面属性设定的方法来 ...
- Gradle学习
Gradle是一种构建工具,它抛弃了基于XML的构建脚本,取而代之的是采用一种基于Groovy的内部领域特定语言.近期,Gradle获得了极大的关注,这也是我决定去研究Gradle的原因. 这篇文章是 ...
- UITouch 触摸事件处理(实例)
来源:http://www.open-open.com/lib/view/open1341882439838.html 1. UITouch 的主要方法: - (void)touchesBegan:( ...
- 支付宝&腾讯的OpenID之路
10年前上网很简单,那时我只用记住三个账号:QQ.21cn邮箱和中国联众.10年后的今天,应用或服务层次不穷:盛大网游.淘宝.豆瓣.人人.微博……太多的账号和密码我已经没办法记住.如果有一个 ...
- C++学习46 getline()函数读入一行字符 一些与输入有关的istream类成员函数
getline函数的作用是从输入流中读取一行字符,其用法与带3个参数的get函数类似.即 cin.getline(字符数组(或字符指针), 字符个数n, 终止标志字符) [例13.7] 用get ...