使用 gulp 编译 Sass

无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。 如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数。

gulp-sass

本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢,建议使用 gulp-sass

请务必理解如下章节后阅读此章节:

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS

Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护。

本章使用 ruby-sass 编译 css,若你没有安装 ruby 和 sass 请移步 使用ruby.taobao安装 Sass

安装

npm install gulp-ruby-sass

基本用法

// 获取 gulp
var gulp = require(‘gulp‘)
// 获取 gulp-ruby-sass 模块
var sass = require(‘gulp-ruby-sass‘)

// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task(‘sass‘, function() {
    return sass(‘sass/‘)
    .on(‘error‘, function (err) {
      console.error(‘Error!‘, err.message);
   })
    .pipe(gulp.dest(‘dist/css‘))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto‘, function () {
    // 监听文件修改,当文件被修改则执行 images 任务
    gulp.watch(‘sass/**/*.scss‘, [‘sass‘])
});

// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务
gulp.task(‘default‘, [‘sass‘, ‘auto‘])

Sass 代码和编译后的 CSS 代码

sass/a.scss

.sass{
    a{
        color:pink;
    }
}

sass/import.scss

@import "a.scss";
.import{
    a{
        color:red;
    }
}

sass/a.css

.sass a {
  color: pink;
}

sass/import.css

.sass a {
  color: pink;
}
.import a{
  color: red;
}

接着阅读:使用 gulp 开发一个项目

时间: 2024-11-07 11:29:07

使用 gulp 编译 Sass的相关文章

laravel 中 与前端的一些事2 之使用Gulp编译sass

下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文件: 编译成功后 存放在public/css/app.css 使用场景二:

续Gulp使用入门编译Sass

使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-sass (--save-dev) 括号中的可选 基本用法 Something like this will compile your Sass files: 'use strict'; var gulp = require('gulp');var sass = require('gulp-sass'

使用 gulp 编译 LESS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护. 安装 npm install gulp-less 基本用法 // 获取 gulp var gulp = require('gulp') // 获取 gulp-less 模块 var less = require('gulp-less') // 编译less // 在命令行输

nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 方法一: 命令行编译sass: 方法二:gulp-sass 方法三:node-compass 方法一: 命令行编译sass: 1 compass compile 回车确认即可生成对应的css代码 方法二:gulp-sass 1.前提条件: 电脑中安装有ruby, 项目中已经安装与配置好基本的gulp(配置与安装本文不介绍.gulp基本用法也不

编译SASS

编译SASS sass编译有很多种方式,如命令行编译模式.sublime插件SASS-Build.编译软件koala.前端自动化软件codekit.Grunt打造前端自动化工作流grunt-sass.Gulp打造前端自动化工作流gulp-ruby-sass等. 2. 命令行编译; //单文件转换命令 sass input.scss output.css //单文件监听命令 sass --watch input.scss:output.css //如果你有很多的sass文件的目录,你也可以告诉sa

Gulp-自动化编译sass和pug文件

突然发现在我博客文章中,缺少这一块的记录,那我就补一篇吧. gulp的环境配置和安装:http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置,用于自动化编译sass和pug文件用: 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass'); 4 var rename = re

Webstorm实时编译SASS和LESS

Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右上角加号添加 为scss添加watcher 为less添加watcher 然后保存文件的时候就自动编译出相应的.css啦~

译:Grunt编译sass&compass和压缩js的工作流程

原文:Grunt workflow for compiling Sass & Compass and minifying Javascript 以前,我们安装Node,NPM和Grunt还包括建立的一个package.json文件和一个Gruntfile文件.在这篇让人兴奋的文章中,我们将会填补一切,你会领会到Grunt是多么的让人吃惊,体验一下他让人敬畏的力量,就像慵懒的沐浴在温暖的阳光下一样让人满意. 如果你还没有安装Node,NPM和Grunt 那就需要先安装好这些东西(真的不难也不可怕)

前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件

前端开发环境之GRUNT-JAVASCRIPT任务运行器 前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass. 原方法: ①安装ruby ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath