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安装,具体的 ...
随机推荐
- sessionStorage、localStorage简介
简介 技术一般水平有限,有什么错的地方,望大家指正. sessionStorage.localStorage.cookie这三个是我们在浏览器端用来存储数据的,cookie使用起来较为繁琐以后进行总结 ...
- Hive架构及Hive On Spark
Hive的所有数据都存在HDFS中. (1)Table:每个表都对应在HDFS中的目录下,数据是经过序列化后存储在该目录中.同时Hive也支持表中的数据存储在其他类型的文件系统中,如NFS或本地文件系 ...
- Spark工程开发常用函数与方法(Scala语言)
import org.apache.spark.{SparkContext, SparkConf}import org.apache.spark.sql.{SaveMode, DataFrame}im ...
- (Delphi) Windows 32 API程序设计目录
这里所有程序均使用Delphi调用Windows 32 API方式实现,并不是使用VCL已经封装好的类实现的! (一)第一个窗口程序 01 创建第一个窗口.
- Delphi中自画TStatusBar面板中的文字颜色背景以及图片
转自 http://www.delphitop.com/html/kongjian/351.html 首先定义:procedure TStatusForm.FormCreate(Sender: TOb ...
- ElasticSearch 概述
简介 Elasticsearch是一个基于Lucene的开源搜索引擎.Elasticsearch也使用Java开发并使用Lucene作为其核心来实现所有索引和搜索的功能,但是它的目的是通过简单的RES ...
- SGU 194 【带上下界的无源汇的可行流】
题意: 给点数n和边数m. 接下来m条有向边. a b c d 一次代表起点终点,下界上界. 求: 判断是否存在可行流,若存在则输出某可行流.否则输出IMPOSSIBLE 思路: <一种简易的方 ...
- POJ 3264-Balanced Lineup, NYOJ 119-士兵杀敌3 线段树
士兵杀敌(三) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...
- 安装和卸载windows程序
安装windows service通常有两种工具 1.Framework目录下的installutil.exe工具.2.visual studio命令行工具 在这里我要说的是当我们使用的系统是64位的 ...
- UITextField详解
UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //初始化textfield并 ...