public
Last active

Susy multiple containers demo

  • Download Gist
multi.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
$total-columns: 6;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
 
// The default container
.container1 { @include container(); }
 
 
// A container with a 12 columns instead
@include layout(12) {
.container2 { @include container(); }
// include any other code that should use this grid...
}
 
// For a container with completely new settings
// simply override the initial variables:
$total-columns: 24;
$column-width: 2em;
$gutter-width: .5em;
$grid-padding: 0em;
 
// A container with a completely different grid
.container3 { @include container(); }
 
// With this solution, you just have to be careful
// that the correct variable values are being used for each block of code.
// You can simplify by making a mixin to handle it:
 
@mixin grid-settings(
$cols: $total-columns,
$width: $column-width,
$gutter: $gutter-width,
$padding: $grid-padding
){
// keep the defaults around
$default-cols: $total-columns;
$default-width: $column-width;
$default-gutter: $gutter-width;
$default-padding: $grid-padding;
 
// use the new settings
$total-columns: $cols;
$column-width: $width;
$gutter-width: $gutter;
$grid-padding: $padding;
 
// apply to contents
@content;
 
// re-instate the defaults
$total-columns: $default-cols;
$column-width: $default-width;
$gutter-width: $default-gutter;
$grid-padding: $default-padding;
}
 
// Now you can use it like this:
@include grid-settings(12,3em,1.5em,1em) {
.container4 { @include container(); }
// include any other code that should use this grid...
}
 
// hmmmm... that might be worth adding to the core...

OK I'm sure I did something wrong but I'm getting an error, grid-settings takes 0 arguments but 4 were passed. I created a _grid.sass file with your mixin and imported it into a layout.sass file and passed
+grid-settings(12,3em,1.5em,1em)
.wrapper
+container()

I'd have to see exactly what you did. This should be in an .scss file, not .sass file, unless you've converted it.

Ahh, I see. Thanks, working perfect now

Definitely worth adding to core

I'm now using a customised version of this mixin to use grids with different widths and styles within a page, something I've found very useful recently. Here is the version I'm using: https://gist.github.com/3934355

Ran across this too.

On http://getclank.com/ the demos page had to be liquid but the others magic.

I solved it this way https://gist.github.com/Wolfr/5788239

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.