Created
July 9, 2012 18:14
-
-
Save mirisuzanne/3077992 to your computer and use it in GitHub Desktop.
Susy multiple containers demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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... |
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: https://gist.github.com/3080170
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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()