Skip to content

Instantly share code, notes, and snippets.

@briznad
Created November 3, 2018 21:28
Show Gist options
  • Save briznad/3d7c77939207724301a65e14bffb9656 to your computer and use it in GitHub Desktop.
Save briznad/3d7c77939207724301a65e14bffb9656 to your computer and use it in GitHub Desktop.
better sass grid
@function _grid($columns, $total-columns: 12, $breakpoint: small, $external: true) {
$gutter-compensation: null;
$gutter-width: map-get($grid-gutters, $breakpoint);
@if $external {
$gutter-compensation: $gutter-width * 0.5;
} @else {
$gutter-compensation: $gutter-width * -1;
}
@return calc(#{ $columns / $total-columns * 100% } + #{ $gutter-compensation });
}
@mixin _cell-style($columns, $total-columns: 12, $breakpoint: small) {
@include _cell-base-style {
@include _cell-width-style($columns, $total-columns, $breakpoint);
@include _cell-spacing-style($columns, $total-columns, $breakpoint);
}
}
@mixin _cell-base-style {
.grid > {
@content;
}
}
@mixin _nested-cell-style($nested-columns, $breakpoint: small) {
@for $columns from 1 through $nested-columns {
@include _nested-cell-base-style($nested-columns, $breakpoint) {
@include _cell-width-style($columns, $nested-columns, $breakpoint);
@include _cell-spacing-style($columns, $nested-columns, $breakpoint);
}
}
}
@mixin _nested-cell-base-style($nested-columns, $breakpoint: small) {
.cell.#{ $breakpoint }-#{ $nested-columns } {
@content;
}
}
@mixin cell-width($columns, $total-columns: 12, $breakpoint: small) {
@include breakpoint($breakpoint) {
width: _grid($columns, $total-columns, $breakpoint, false);
}
}
@mixin _cell-width-style($columns, $total-columns: 12, $breakpoint: small) {
.#{ $breakpoint }-#{ $columns } {
@include cell-width($columns, $total-columns, $breakpoint);
}
}
@mixin _cell-spacing($direction, $columns, $total-columns: 12, $breakpoint: small) {
@include breakpoint($breakpoint) {
margin-#{ $direction }: _grid($columns, $total-columns, $breakpoint, true);
}
}
@mixin cell-left-spacing($columns, $total-columns: 12, $breakpoint: small) {
@include _cell-spacing(left, $columns, $total-columns, $breakpoint);
}
@mixin cell-right-spacing($columns, $total-columns: 12, $breakpoint: small) {
@include _cell-spacing(right, $columns, $total-columns, $breakpoint);
}
@mixin _cell-spacing-style($columns, $total-columns: 12, $breakpoint: small) {
.#{ $breakpoint }-offset-#{ $columns } {
@include cell-left-spacing($columns, $total-columns, $breakpoint);
}
.#{ $breakpoint }-offset-right-#{ $columns } {
@include cell-right-spacing($columns, $total-columns, $breakpoint);
}
}
@mixin grid-classes {
.grid {
display: flex;
flex-flow: row wrap;
}
@each $breakpoint, $total-columns in $grid-columns {
$half-gutter: map-get($grid-gutters, $breakpoint) / 2;
.grid {
@include breakpoint($breakpoint) {
margin-left: $half-gutter * -1;
margin-right: $half-gutter * -1;
}
> .cell {
@include breakpoint($breakpoint) {
margin-left: $half-gutter;
margin-right: $half-gutter;
}
}
}
@for $columns from 1 through $total-columns {
@include _cell-style($columns, $total-columns, $breakpoint);
@include _nested-cell-style($columns, $breakpoint);
}
}
}
@include grid-classes;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment