www.aleph1.co.uk Git - yaffs-website/blob - node_modules/gulp-sass/README.md

   1 # gulp-sass [![Build Status](https://travis-ci.org/dlmanning/gulp-sass.svg?branch=master)](https://travis-ci.org/dlmanning/gulp-sass) [![Join the chat at https://gitter.im/dlmanning/gulp-sass](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/dlmanning/gulp-sass?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![npm version](https://badge.fury.io/js/gulp-sass.svg)](http://badge.fury.io/js/gulp-sass)
   2
   3 Sass plugin for [Gulp](https://github.com/gulpjs/gulp).
   4
   5 **_Before filing an issue, please make sure you have [Updated to the latest Gulp Sass](https://github.com/dlmanning/gulp-sass/wiki/Update-to-the-latest-Gulp-Sass) and have gone through our [Common Issues and Their Fixes](https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes) section._**
   6
   7 # Install
   8
   9 ```
  10 npm install gulp-sass --save-dev
  11 ```
  12
  13 # Basic Usage
  14
  15 Something like this will compile your Sass files:
  16
  17 ```javascript
  18 'use strict';
  19
  20 var gulp = require('gulp');
  21 var sass = require('gulp-sass');
  22
  23 gulp.task('sass', function () {
  24   return gulp.src('./sass/**/*.scss')
  25     .pipe(sass().on('error', sass.logError))
  26     .pipe(gulp.dest('./css'));
  27 });
  28
  29 gulp.task('sass:watch', function () {
  30   gulp.watch('./sass/**/*.scss', ['sass']);
  31 });
  32 ```
  33
  34 You can also compile synchronously, doing something like this:
  35
  36 ```javascript
  37 'use strict';
  38
  39 var gulp = require('gulp');
  40 var sass = require('gulp-sass');
  41
  42 gulp.task('sass', function () {
  43   return gulp.src('./sass/**/*.scss')
  44     .pipe(sass.sync().on('error', sass.logError))
  45     .pipe(gulp.dest('./css'));
  46 });
  47
  48 gulp.task('sass:watch', function () {
  49   gulp.watch('./sass/**/*.scss', ['sass']);
  50 });
  51 ```
  52
  53 ## Options
  54
  55 Pass in options just like you would for [`node-sass`](https://github.com/sass/node-sass#options); they will be passed along just as if you were using `node-sass`. Except for the `data` option which is used by gulp-sass internally. Using the `file` option is also unsupported and results in undefined behaviour that may change without notice.
  56
  57 For example:
  58
  59 ```javascript
  60 gulp.task('sass', function () {
  61  return gulp.src('./sass/**/*.scss')
  62    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  63    .pipe(gulp.dest('./css'));
  64 });
  65 ```
  66
  67 ## Source Maps
  68
  69 `gulp-sass` can be used in tandem with [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) to generate source maps for the Sass to CSS compilation. You will need to initialize [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) prior to running `gulp-sass` and write the source maps after.
  70
  71 ```javascript
  72 var sourcemaps = require('gulp-sourcemaps');
  73
  74 gulp.task('sass', function () {
  75  return gulp.src('./sass/**/*.scss')
  76   .pipe(sourcemaps.init())
  77   .pipe(sass().on('error', sass.logError))
  78   .pipe(sourcemaps.write())
  79   .pipe(gulp.dest('./css'));
  80 });
  81 ```
  82
  83 By default, [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a path relative to the `gulp.dest()` destination in the `sourcemaps.write()` function.
  84
  85 ```javascript
  86 var sourcemaps = require('gulp-sourcemaps');
  87 gulp.task('sass', function () {
  88  return gulp.src('./sass/**/*.scss')
  89   .pipe(sourcemaps.init())
  90   .pipe(sass().on('error', sass.logError))
  91   .pipe(sourcemaps.write('./maps'))
  92   .pipe(gulp.dest('./css'));
  93 });
  94 ```
  95
  96 # Issues
  97
  98 `gulp-sass` is a very light-weight wrapper around [`node-sass`](https://github.com/sass/node-sass), which in turn is a Node binding for [`libsass`](https://github.com/sass/libsass), which in turn is a port of [`Sass`](https://github.com/sass/sass). Because of this, the issue you're having likely isn't a `gulp-sass` issue, but an issue with one of those three projects.
  99
 100 If you have a feature request/question how Sass works/concerns on how your Sass gets compiled/errors in your compiling, it's likely a `libsass` or `Sass` issue and you should file your issue with one of those projects.
 101
 102 If you're having problems with the options you're passing in, it's likely a `node-sass` or `libsass` issue and you should file your issue with one of those projects.
 103
 104 We may, in the course of resolving issues, direct you to one of these other projects. If we do so, please follow up by searching that project's issue queue (both open and closed) for your problem and, if it doesn't exist, filing an issue with them.