Good day! I'm learning the layout. Began to use the work of sass. I compile and build in the junction nodejs 8.1.4 + gulp 3.9.1. I decided to try using susy 3. But here are the problems with installing it. I tried installing via bower, added @import "../../bower_components/susy/sass/susy"; into the main sass file. Next I set the settings

  $susy: ( columns: 12, container: 940px, gutters: 0.25, global-box-sizing: border-box, debug: (image: show-columns) );

and proper class

 .content{ @include span(12); }

an error occurs in the terminal

 Error in plugin 'sass' Message: src\style\main.scss Error: no mixin named span Backtrace: src/style/main.scss:14 on line 14 of src/style/main.scss >> @include span(12); -------------^

I tried to install using npm npm install susy --save-dev

Added a task to the .pipe(sass({includePaths: ['node_modules/susy/sass']})) : .pipe(sass({includePaths: ['node_modules/susy/sass']}))

in the main sass file I do @import 'susy'

an error is thrown into the console

 Error in plugin 'sass' Message: src\style\main.scss Error: File to import not found or unreadable: susy. Parent style sheet: D:/basic-template/src/style/main.scss on line 4 of src/style/main.scss >> @import 'susy';

Gulp link

Well, actually what am I doing wrong? thanks in advance

    1 answer 1

    Most of the information on the Internet is on susy 2.0. And through "npm install susy", the newest version of susy 3.0 is installed, which came out a little more than a month ago and in which the syntax of both the config and the functions themselves has changed a lot. In short, the mixins are no longer at all. The start config looks like this:

      $susy: ( 'columns': susy-repeat(12), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', );

    More in the official documentation for the 3rd version .

    • Well, in any case, I need to connect this module. Here's how to do it? - scarfase
    • If you installed the module via npm, then simply at the beginning of your scss file include: @import "node_modules/susy/sass/susy"; @import "node_modules/susy/sass/plugins/svg-grid"; @import "node_modules/susy/sass/susy"; @import "node_modules/susy/sass/plugins/svg-grid"; If necessary, replace the paths with your own, depending on where you have the node_modules folder. - Skymen