sass mapsource --->gulp
1.安装插件
npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer
如果安装错误,请用sudo 权限;
2.在gulp.js中,引用所需的插件如下;
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var maps = require('gulp-sourcemaps');
3.新建任务
var path = {
scss: './www/style/Myself.scss',
css: './www/style/'
}
//编译sass
gulp.task('sass', function() {
gulp.src( path.scss)
.pipe(maps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(maps.write())
.pipe(gulp.dest( path.css ))
});
gulp.task('autoprefix', function() {
gulp.src( path.css )
.pipe(prefix('last 5 versions', '> 1%', 'ie8'))
.pipe(gulp.dest( path.css ));
});
4.在谷歌浏览器设置一下;
点击控制台的设置按钮 ;
如图

选择图中的

最后你会在图1中看到结果;
sass mapsource --->gulp的更多相关文章
- 設定 Bootstrap/SASS/Bower/gulp (Windows平台)
請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...
- Sass和gulp的简单了解
一.sass less css预处理器 sass里面有2种语法 第一种语法是sass 后缀名必须是sass 第二种语法是scss 后缀名必须是scss ...
- sass sublime text 2 gulp ionic
sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...
- gulp sass使用
var gulp = require("gulp");var sass = require("gulp-sass-china");var dgbl = requ ...
- 极其简单的使用基于gulp和sass前端工作流
简单的记录自己如何在实际工作中使用gulp和sass的.我的原则是,小而美! gulp与sass介绍 gulp 什么是gulp?和Grunt一样,是一种任务管理工具:和Grunt又不一样,gulp是一 ...
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- 使用 gulp 编译 Sass
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...
随机推荐
- java.lang.ClassNotFoundException: org.eclipse.jetty.plus.webapp.EnvConfiguration
最近刚接触jetty,在myeclipse8.6中加入了一个项目,运行时就出了这个java.lang.ClassNotFoundException: org.eclipse.jetty.plus.we ...
- pthread_key_t和pthread_key_create()详解
pthread_key_t和pthread_key_create()详解 下面说一下线程中特有的线程存储, Thread Specific Data .线程存储有什么用了?他是什么意思了?大家都知道, ...
- [CSS]如何正确使用ID和Class?
作者:DarkZone链接:https://www.zhihu.com/question/19550864/answer/23440690来源:知乎 以下摘自<精通CSS:高级Web标准解决方案 ...
- NeHe OpenGL教程 第二十九课:Blt函数
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- 解决Xshell和vim中文乱码(转载)
From:http://blog.csdn.net/lovey599/article/details/7275403 一般而言,乱码多是由于编码问题引起 的,在windows系统中,大多数情况下中文编 ...
- Windows XP下安装和配置Apache2.2.22服务器+PHP5+Mysql5
原文:http://www.chinaz.com/web/2012/0516/252021.shtml 随着PHP网站的流行,国内越来越多的站长使用php开发网站或者使用相关的php开源网站(例如:D ...
- 区分DPI、分辨率(PPI)、图像的物理大小、像素宽度
分辨率都知道,越高越清晰. 一.描述分辨率的单位有: dpi(点每英寸).lpi(线每英寸)和ppi(像素每英寸).但只有lpi是描述光学分辨率的尺度的.虽然dpi和ppi也属于分辨率范畴内的单 ...
- 使用mysql函数 group_concat 一点需要注意的
这个函数是一个非常好用的函数,比如我们可以在 进行多对多关联表,进行批量查询的时候可以用到, 比如学生和老师是多对多的关系,如果我们希望查询 指定的一些老师对应的学生有哪些 的时候,一般的情况,我们可 ...
- dual
1. dual 确实是一张表.是一张只有一个字段,一行记录的表. 2.习惯上,我们称之为'伪表'.因为他不存储主题数据.3. 他的存在,是为了操作上的方便.因为select 都是要有特定对象的.如:s ...
- 【转载】eclipse调试arm裸机程序
一.集成开发环境 软件部分:eclipse , GDB Server , Jlink软件 硬件部分:Jlink硬件 准备工作1:从SD/NOR Flash启动,格式化nand flash 准备工作2: ...