Compile Sass to CSS using Compass
Requirements
gulp-compass
requires the compass ruby gem in order to compile compass. This can easily be installed via Terminal.
$ gem update --system
$ gem install compass
Please refer the user guide
Installation
Install with npm
$ npm install gulp-compass --save-dev
Usage
load your compass config.rb
file. Please make sure css_dir
and sass_dir
value on config.rb
file.
css_dir
default value iscss
.sass_dir
default value issass
.
if css_dir
value is stylesheets
, please add css
key as your define.
var compass = require('gulp-compass');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'stylesheets'
}))
.pipe(gulp.dest('app/assets/temp'));
});
set your project path.
var compass = require('gulp-compass'),
path = require('path');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
project: path.join(__dirname, 'assets'),
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
set your compass settings.
var compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
css: 'app/assets/css',
sass: 'app/assets/sass',
image: 'app/assets/images'
}))
.pipe(minifyCSS())
.pipe(gulp.dest('app/assets/temp'));
});
Configuration
Configuration Options
style
default: nested
description: The output style for the compiled css. One of: nested, expanded, compact, or compressed.
comments
default: true
description: Show line comments or not.
relative
default: true
description: Are assets relative.
css
default: css
description: The target directory where you keep your css stylesheets. It is relative to the project
option.
sass
default: sass
description: The source directory where you keep your sass stylesheets. It is relative to the project
option.
javascript
default: js
description: The directory where you keep your javascripts. It is relative to the project
option.
font
default: font
description: The directory where you keep your fonts. It is relative to the project
option.
project
default: your project base
description: The location where all your assets are store.
logging
default: true
description: show/hide compile log message.
Running tests
via Makefile
$ make test
or
$ npm test