How to add susy to thorax without using compass?

Question

I've started using Thorax, and I have used the thorax generator with yeoman for setting up a webapp:

$ npm install -g yo generator-thorax
$ yo thorax desired-application
$ cd desired-application
$ grunt

I've selected SASS as css preprocessor, and then I can successfully run my webapp after building it with the grunt command.

Now my problem is that I'm not sure how I can add susy to my Gruntfile.js. The documentation states that you should add require: 'susy' to the SASS options parameter.

But I don't have the SASS options in my Gruntfile.js, I've tried adding it in - but it doesn't work when I add @import "susy"; to my css/base.scss file.

Has anyone successfully added susy to a thorax application?

EDIT I've also tried adding susy through bower.

bower install susy --save

And I'm then able to do @import "../bower_components/susy/sass/susy"; However it would be nice to have susy added to my SASS options in gruntfile.js, and be able to do @import "susy"; instead.

Answer 1

Hum, If you've done your Gruntfile correctly, I suppose that's there is a problem with the way you installed susy.

Have you the correct (and up-to-date 2.1.2) gem in your ruby on which you have r/w rights ? If no, try to run :

gem install susy

Like precised on their docs, Susy is build to be part of Compass, you should try to install it with

gem install compass

And add a compass task in your Gruntfile, with something like this :

compass: {
    dist: {
        options: {
            require: 'susy',
            cssDir: 'css',
            sassDir: 'sass'
        }
    }
}

Where cssDir and sassDir are respectively destination and source folder for the compass task.

Don't forget to install the plugin with :

npm install grunt-contrib-compass --save-dev

To load it and register it

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', [compass']);

Or if you don't want compass at all :

npm install grunt-contrib-sass --save-dev

sass: {
    dist: {
        options: {
            style: 'expanded',
            require: 'susy'
        },
        files: {
            'css/compiled.css': 'main.scss'
        }
    }
}

Answer 2

So I found that the grunt tasks where included through a /task folder - as soon as I added my options to the SASS.js task file there it worked! Here's the steps I did:

First if you haven't installed the yeoman generator for thorax before, run:

$ npm install -g yo generator-thorax

Then create your thorax application through the yeoman generator (selecting SASS as your css-preprocessor):

$ yo thorax desired-application

Then add the Susy gem

$ sudo gem install susy

Then open tasks/options/sass.js, and add require: 'susy' to the SASS task as explained in the documentation. Your sass.js should then look like this:

var grunt = require('grunt');

module.exports = {
  dist: {
    options: {
      style: 'expanded',
      require: 'susy'
    },
    files: [{
      expand: true,
      cwd: grunt.config('paths.css'),
      src: ['*.{sass,scss}'],
      dest: grunt.config('paths.output.css'),
      ext: '.css'
    }]
  }
};

You can then add @import "susy"; to your css/base.scss, and run:

$ cd desired-application
$ grunt