Skip to content

Instantly share code, notes, and snippets.

@Sulcalibur
Forked from mirisuzanne/_magic.scss
Created October 30, 2012 20:26
Show Gist options
  • Save Sulcalibur/3982785 to your computer and use it in GitHub Desktop.
Save Sulcalibur/3982785 to your computer and use it in GitHub Desktop.
CSS: Compass: Susy: - Layout file for a "magic" Susy grid.
//-----------------------------------------------------------------------------
// Grid Settings
$total-columns : 4;
$column-width : 4.5em;
$gutter-width : 1.5em;
$grid-padding : $gutter-width;
//-----------------------------------------------------------------------------
// Responsive Variables
$min : 40em;
$cols : 12;
$ie : lt-ie9;
$break : $min $cols $ie;
//-----------------------------------------------------------------------------
// Container
.page {
@include container($total-columns, $break);
}
// The above is a shortcut for:
//
// .page {
// @include container;
// @include at-breakpoint($break) {
// @include set-container-width;
// }
// }
//
// You can also use "container" rather than "set-container-width",
// but the output will be less DRY.
//-----------------------------------------------------------------------------
// Structure
[role="banner"] {
@include at-breakpoint($break) {
@include prefix(3,12);
}
}
[role="navigation"] {
@include at-breakpoint($break) {
@include span-columns(3,12);
}
}
[role="main"] {
@include at-breakpoint($break) {
@include span-columns(9 omega,12);
article { @include span-columns(6,9); }
aside { @include span-columns(3 omega,9); }
}
}
.gist { clear: both; }
[role="contentinfo"] {
clear: both;
margin: 0 0 - $grid-padding;
padding: 0 $grid-padding;
@include at-breakpoint($break) {
margin: 0;
@include pad(3,3,12);
}
}
// In this case, I should be able to write:
//
// @include at-breakpoint($break) {
// [role="banner"] {...}
// [role="navigation"] {...}
// [role="main"] {...}
// }
//
// But that is not currently possible in Sass, when an IE class is present.
// Without the IE class it works fine, and gives a more DRY output.
// This is a known bug in Sass, and should be fixed soon.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment