Compiling SASS and SUSY with GULP

Question

I am trying to get gulp to compile my sass and use the susy grid/framework.

I'm having troubles finding any information about this online.

I have included:

"gulp-ruby-sass": "^0.7.1",

into my package.json and installed everything.

My gulp sass gulp task likes like so:

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

So I can't for the life of me work out how to include susy so it complies using gulp, I haven't looked and can't seem to find anything relating to this online.

score 5 · Accepted Answer · answered Sep 15 '14 at 07:29

5

You can use gulp-compass, you only need to have compass installed in your system and install gulp-compass package through npm, here is a sample code:

var compass = require('gulp-compass');

gulp.task('compass', function() {
  return gulp.src('./src/*.scss')
  .pipe(compass({
    // Gulp-compass options and paths
    css: 'app/assets/css',
    sass: 'app/assets/sass',
    require: ['susy']
  }))
  .on('error', handleErrors)
  .pipe(gulp.dest('app/assets/temp'));
});

More info about this package here

answered Sep 15 '14 at 07:29

Alex Guerrero

2,109
1
19
28

2

Bingo good sir. I however wanted to include it without compass so I used the `gulp-sass` module. But thats not important. The require was the key. – Jamie Hutber Sep 15 '14 at 22:52
It seems that gulp-compass is rejected by gulp community ! – Shnd Aug 12 '15 at 05:06

score 1 · Answer 2 · answered Dec 11 '15 at 06:12

To have more details from Jamie's answer, here is what you can do to use susy without compass..

download .zip package of susy from github. extract package into node_modules directory.
In my case I put it in susy-master folder.

In gulpfile.js, you could have some thing like this to include susy package. Note that the important is to put correct includePath value to be the same path of the susy-master folder..

gulp.task('sass', function(){
  gulp.src('public/sass/styles.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: ['node_modules/susy-master/sass']
    }).on('error', sass.logError))

    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('public/css'))
});

Import susy in styles.scss
```
@import "susy";
```

Compiling SASS and SUSY with GULP

2 Answers2

Linked