Skip to content

@ericam /multi.scss

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
Susy multiple containers demo
$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
// 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...
hdc commented

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


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


Ok posted what I have:


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:


Ran across this too.

On the demos page had to be liquid but the others magic.

I solved it this way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.