Skip to content

Instantly share code, notes, and snippets.

@ifthenelse
Created June 27, 2017 16:23
Show Gist options
  • Save ifthenelse/fc4a24f168be690fddb8f90ab4dad6f6 to your computer and use it in GitHub Desktop.
Save ifthenelse/fc4a24f168be690fddb8f90ab4dad6f6 to your computer and use it in GitHub Desktop.
Programmatically stack SASS breakpoints in a json-like structure and use them to create a grid system layout
$smallphone: 480px;
$phone: 640px;
$tablet: 768px;
$desktop: 1024px;
$wide: 1440px;
// Grid breakpoints map
$breakpoints: (small: null, medium: "screen and (min-width: 768px)", large: "screen and (min-width: 1440px)");
// Non-grid breakpoints map
$phone: "screen and (min-width: 480px)";
$tablet: "screen and (min-width: 769px)";
$desktop: "screen and (min-width: 1024px)";
$onlyMobile: "only screen and (max-width: 767px)";
$onlyTablet: "only screen and (min-width: 768px and max-width: 1023px)";
$onlydesktop: "only screen and (min-width: 1024px and max-width: 1439px)";
.container {
.row {
@include row;
&__flex {
position: relative;
display: flex;
}
&__cf {
@extend %clearfix;
}
}
// grids
.col {
position: relative;
@each $mq in $breakpoints {
$key: nth($mq, 1);
$value: nth($mq, 2);
// grid by breakpoint
@for $i from 1 through $grid-columns {
&.#{$key}-#{$i} {
@if $value {
@media #{$value} {
@include span-columns($i);
}
}
@else {
@include span-columns($i);
}
&--omega {
@if $value {
@media #{$value} {
@include span-columns($i, block-collapse);
}
}
@else {
@include span-columns($i, block-collapse);
}
}
&--last-of-row {
margin-right: 0;
}
}
&.#{$key}-shift-#{$i} {
@if $value {
@media #{$value} {
@include shift($i);
}
}
@else {
@include shift($i);
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment