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.

Remember to accept the answer that helped you resolved your problem — Preview, Jun 01 '14 at 15:36

Preview · Accepted Answer · 2014-06-01T10:10:24.480

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'
        }
    }
}

edited Jun 01 '14 at 10:10

answered May 31 '14 at 18:55

Preview

35,317
10
92
112

Thanks for the answer, I see that susy v1 requires compass - but v2 doesn't require compass does it? If possible I'd like to only add Susy without using Compass. (so through adding a option to a SASS task in the gruntfile). – am_ Jun 01 '14 at 09:23
Yeah it's not required, but recommanded, update my answer to put only a sass task example – Preview Jun 01 '14 at 09:45
Thanks for the sass task, it's the same I got from the documentation - so i've tried that before, but i still get an error if I do @import "susy"; I'm trying to learn more now about how to configure grunt/SASS. – am_ Jun 01 '14 at 10:20
Thanks for the help! the problem i had was that there already was a sass task added through the thorax yeoman generator - as soon as I added the option there it worked! I've added an answer showing the steps I had to do to get it to work. – am_ Jun 01 '14 at 11:00

score 0 · Answer 2 · answered Jun 01 '14 at 10:58

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

How to add susy to thorax without using compass?

2 Answers2