Cant get started with Susy 3 "Error: no mixin named span"
alexandar87 opened this issue · 9 comments
Hi
im trying to setup new project with Susy 3 but im constantly getting error:
Error: no mixin named span
Here is my gulpfile task:
gulp.task('sass', function() { gulp.src(sassSources) .pipe(sass({ style: 'expanded', includePaths: ['node_modules/susy/sass'] })) .on('error', gutil.log) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('assets')) .pipe(connect.reload()) });
Than i tried to import it with @import "susy"; also by adding full path to node_modules with @import "../node_modules/susy/sass/susy"; but im still getting the same undefined error when i write this to css @include span(4);.
Any help?
I have the same issue.
The project that I'm working is in Angular 4.3 created by Angular CLI with Webpack.
I tryied use functions: span, gutter. And even with prefix: susy-span, susy-gutter.
Please @mirisuzanne help us once more.
Right, Susy 3 is a major release with breaking changes – including removal of all mixins (including span). You can read more about that in the docs or in the intro article.
At this point in CSS, there is no reasonable "default" approach to layouts. We have a number of good options, from CSS Grid (recent support), to flexbox (several years), floats, display-table, etc. With so much new technology coming down the pipes, we're moving away from an explicit endorsement of any single approach – and we can't build shortcuts for all of them.
The result is bringing Susy3 back to it's core math, accessed through functions, and applied to any layout technique as you see fit.
Yes but in the docs here http://oddbird.net/2017/06/28/susy3/ there is a Heading Introducing Susy3
in witch span mixin is used?
The span function is used there – $width: span(3); – but I don't see any mixins used. There is also a demo showing how you might use the functions to build a span mixin of your own.
Oh sorry, you are right. I guess i will have to study docs a bit more, or go back to v2. Since i dont see much of a help here without mixins at least for me. Thanks for the answers.
Yeah, Susy2 is a fine solution for people who want to continue using strict floated grids.
At this point, there are many viable layout options that are simpler without a full grid system (we cover a few in the article). So we think of Susy3 as a fallback plan – not a primary layout system like many are used to, but a trimmed-down grid calculator for handling edge-cases, and browser fallbacks.
Initial plan was to use CSS Grid, but still scared of lack of support for older browsers, especially mobile Safari...
I've found that CSS Grid is often the fastest option – leaving me time to write simpler fallback layouts as-needed with @supports. I highly recommend a grid-first approach, if that's an option for you, rather than waiting for full legacy support from browsers.
For me, Susy is to the math, not to the grid.