Compile Sass to CSS with Ruby Sass
This is slower than gulp-sass, but more stable and feature-rich.
Issues with the output should be reported on the Sass issue tracker.
$ npm install --save-dev gulp-ruby-sass
You also need to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby; test with ruby -v
in your terminal. When you've confirmed you have Ruby, run gem install sass
to install Sass.
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', function () {
return gulp.src('src/scss/app.scss')
.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('dist/css'));
});
Add the files you want to compile to gulp.src()
.
Handle Sass errors with an on('error', cb)
listener or a plugin like plumber. gulp-ruby-sass throws errors like a gulp plugin, but also passes the erroring Sass files through the stream if you prefer to see the errors in your browser.
Use gulp-watch to automatically recompile your files when you edit them.
Note to Windows users: All Sass options expect unix style path separators (/
). If you're setting paths dynamically, use slash to normalize them.
Type: String
Default: auto
Values:
auto
- relative paths where possible, file URIs elsewherefile
- always absolute file URIsinline
- include the source text in the sourcemapnone
- no sourcemaps
Enable Source Map. Requires Sass >= 3.4.0 and the sourcemapPath
option.
Type: string
A relative path from the output CSS directory to the Sass source directory as seen by your web server.
Because gulp-ruby-sass can't know your CSS destination directory or your server setup you have to give a little extra information to help the browser find sourcemaps. Examples:
- If source is
site/scss
, destination issite/css
, and you're serving fromsite
:{ sourcemapPath: '../scss' }
. - If source is
app/styles
, destination is.tmp/styles
, and you're serving both.tmp
andapp
:{ sourcemapPath: '.' }
.
Type: Boolean
Default: false
Show a full traceback on error.
Type: Boolean
Default: false
on Windows, otherwise true
Use Unix-style newlines in written files.
Type: Boolean
Default: false
Just check syntax, don't evaluate.
Type: String
Default: nested
Output style. Can be nested
, compact
, compressed
, expanded
.
Type: Number
Default: 3
How many digits of precision to use when outputting decimal numbers.
Type: Boolean
Default: false
Silence warnings and status messages during compilation. NOTE: If you set quiet
to true
gulp will no longer emit most Sass and Bundler errors.
Type: Boolean
Default: false
Make Compass imports available and load project configuration (config.rb
located close to the gulpfile.js
).
Type: Boolean
Default: false
Emit output that can be used by the FireSass Firebug plugin.
Type: Boolean
Default: false
Emit comments in the generated CSS indicating the corresponding source line.
Type: String|Array
One or more Sass import paths, relative to the gulpfile.
Type: String|Array
Require one or more Ruby libraries before running Sass.
Type: String
Default: .sass-cache
The path to put cached Sass files.
Type: Boolean
Default: false
Don't cache to sassc files.
Type: Boolean
Default: false
Run sass
with bundle exec: bundle exec sass
.
Type: String
Default: gulp-ruby-sass
Name of the temporary directory used to process files. If you have multiple streams with gulp-ruby-sass running at once each will need a unique container name.
MIT © Sindre Sorhus