I am hoping some with Susy experience could tell me what I am doing wrong.
My full scss layout:
@import "susy";
// Susy Variables
// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;
// Define Susy grid variables mobile first.
$total-columns: 4;
$column-width: 4em;
$gutter-width: $horz-spacing-unit;
$grid-padding: 5px;
$container-style: magic;
$container-width: 1200px;
// Susy Media Layouts @see http://susy.oddbird.net/guides/reference/#ref-media-layouts
$tab: 44em 12; // At 44em use 12 columns.
$desk: 70em 16; // At 70em use 16 columns.
.l-header,
.l-main,
.l-footer {
@include container; // Define these elements as the grid containers.
margin-bottom: $vert-spacing-unit;
}
.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
margin-bottom: $vert-spacing-unit;
}
@include at-breakpoint($tab) { // At a given Susy Media Layout, use a given amount of columns.
.l-header,
.l-main,
.l-footer {
@include set-container-width; // Reset only the container width (elements have already been declared as containers).
}
.l-branding {
@include span-columns(4, 12); // Span 4 out of 12 columns.
}
.l-region--header{
@include span-columns(8 omega, 12); // Span the last (omega) 8 columns of 12.
}