Skip to content

Instantly share code, notes, and snippets.

@fitzryland
Last active August 29, 2015 13:57
Show Gist options
  • Save fitzryland/9646583 to your computer and use it in GitHub Desktop.
Save fitzryland/9646583 to your computer and use it in GitHub Desktop.
My Basic Susy Breakpoint Setup
// $breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: true;
$susy: (
gutters: 0.2
);
$layouts: (
small: (
break: 0em 37.5em,
grid: (
columns: 5,
)
),
medium: (
break: 37.5em 62em,
grid: (
columns: 9,
)
),
large: (
break: 62em,
grid: (
columns: 18,
),
fallback: ".lt-ie9"
)
);
@mixin bp($break-name) {
$layout: map-get($layouts, $break-name);
@if map-has-key($layout, "fallback") {
@include susy-breakpoint(map-get($layout, "break"), map-get($layout, "grid"), map-get($layout, "fallback")) {
@content;
}
} @else {
@include susy-breakpoint(map-get($layout, "break"), map-get($layout, "grid")) {
@content;
}
}
}
// Example
.col {
@include bp(small) {
@include span(1 of 5);
&:nth-child(5n) {
@include last;
}
}
@include bp(medium) {
@include span(1 of 9);
&:nth-child(9n) {
@include last;
}
}
@include bp(large) {
@include span(1 of 18);
}
}
.large-last {
@include bp(large) {
@include last;
}
}
// Compiles to:
@media (min-width: 0em) and (max-width: 37.5em) {
.col {
width: 17.24138%;
float: left;
margin-right: 3.44828%;
}
.col:nth-child(5n) {
float: right;
margin-right: 0;
}
}
@media (min-width: 37.5em) and (max-width: 62em) {
.col {
width: 9.43396%;
float: left;
margin-right: 1.88679%;
}
.col:nth-child(9n) {
float: right;
margin-right: 0;
}
}
@media (min-width: 62em) {
.col {
width: 4.6729%;
float: left;
margin-right: 0.93458%;
}
}
.lt-ie9 .col {
width: 4.6729%;
float: left;
margin-right: 0.93458%;
}
@media (min-width: 62em) {
.large-last {
float: right;
margin-right: 0;
}
}
.lt-ie9 .large-last {
float: right;
margin-right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment