What am I doing wrong with npm susy and grunt?

Question

I am trying to compile my scss files using susy, node-sass, grunt-sass I added all these dependencies using npm install. I am adding the setup for grunt like

sass: {
      options: {
        implementation: sass,
        sourceMap: true
      },
      dist: {
        options: {
          style: 'expanded',
          require: 'susy'
        },
        files: {
          'app/crossbrand_us/styleguide/css/shared.css': 'app/sass/xb/widgets/advertised-offers/wdgt-advertised-offers-vehicle.scss'
        }
      }
    },

@import "wdgt-advertised-offers-shared";
@import "node_modules/susy/sass/susy";
$wdgt-advertised-offers-vehicle-selector: ".wdgt-advertised-offers-vehicle";

#{$wdgt-advertised-offers-vehicle-selector} {
    @include pad(1%);
 }

but this throws an error

Fatal error: no mixin named pad

How do I fix this?

Answer 1

The latest versions of Susy (3.x) do not include any mixins. In order to use the old mixins, you will have to downgrade to a 2.x version of Susy (2.2.14 is the latest). Or check out the docs to get started with Susy 3.

I'm not sure if there are any other issues in the setup as well…