目前sass提供了观察文件变化,自动将sass文件编译成css的功能。
但在有些机子上跟踪编译非常慢。使用不便。
如果想更顺手的完成更复杂的编译,就需要使用nodejs,gulp 工具进行处理。
Sass安装
环境ubuntu 16.04
sudo apt-get install ruby
sudo gem install sass
国内会报错,如下
sudo gem install sass
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org/quick/Marshal.4.8/sass-3.4.22.gemspec.rz)
原因是国内和谐gem,解决方法是使用淘宝镜像如下
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
重新执行sudo gem install sass
nodejs安装
安装参考nodejs.org
npm访问慢的问题参考npm.taobao.org淘宝镜像
gulp安装
gulp 介绍
gulp 安装参考gulp入门指南
简易步骤:
在项目更目录执行npm install --save-dev gulp
*安装gulp-sass插件,详细说明gulp-sassnpm install gulp-sass
sass 转 css 操作流
示例项目目录结构
-node_modules //node 模块
-scss //编译前的scss文件
--test.scss
-css //编译后的css文件
--test.css
--gulpfile.js //gulp任务执行工具配置文件
--index.html
gulpfile.js文件内容
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('scss',function(){
gulp.src('./scss/*.scss') //这里是scss文件的目录
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./css')); //这里是编译后css存放的目录
})
gulp.task('default',function(){
gulp.watch('./scss/*.scss',['scss']); //在这里执行文件观察任务,发现变化执行上面定义好的 `scss`编译任务。
})
启动:node_modules/.bin/gulp gulpfile.js
提示
[19:05:18] Using gulpfile ~/test/gulpfile.js
[19:05:18] Starting 'default'...
[19:05:18] Finished 'default' after 20 ms
打开编辑器编辑scss下test.scss文件,保存,查看css下test.css文件,已经编译好了。