Mike SCSS grids

btn.scss

/* buttons should always be 4 columns wide, except on small when 100% */
.btn {
  width: col-span(4,large);

  @include breakpoint(medium) {
    width: col-span(4,medium);
  }
  @include breakpoint(small) {
    width: col-span(6,small); // equivilant to width: 100%;
  }
}

columns.scss

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
/*
/*  base columns container
/*
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.columns {
  @extend %float_clear;
  margin-left: -(map-get($gutters,large)/2);
  margin-right: -(map-get($gutters,large)/2);
  clear: both;

  @include breakpoint(medium) {
    margin-left: -(map-get($gutters,medium)/2);
    margin-right: -(map-get($gutters,medium)/2);
  }

  @include breakpoint(small) {
    margin-left: -(map-get($gutters,small)/2);
    margin-right: -(map-get($gutters,small)/2);
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
/*
/*  base column
/*
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.col {
  float: left;
  width: col-span(6,large);
  margin-left: map-get($gutters,large)/2;
  margin-right: map-get($gutters,large)/2;

  @include breakpoint(medium) {
    width: col-span(6,medium);
    margin-left: map-get($gutters,medium)/2;
    margin-right: map-get($gutters,medium)/2;
  }
  @include breakpoint(small) {
    width: col-span(3,small);
    margin-left: map-get($gutters,small)/2;
    margin-right: map-get($gutters,small)/2;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
/*
/*  columns container specifies how many columns inside 
/*
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 4 columns: <ul class="columns columns--4x"><li class="col">...</li></ul> */
.columns--4x {

  .col {
    width: col-span(3,large);

    &:nth-child(4n+1) {
      clear: left;
    }

    @include breakpoint(medium) {
      width: col-span(3,medium);
    }
    @include breakpoint(small) {
      width: col-span(3,small);

      &:nth-child(3n+1) {
        clear: none;
      }
      &:nth-child(2n+1) {
        clear: left;
      }
    }
  }
}

/* 3 columns on the medium breakpoint override: <ul class="columns columns--4x columns--3x@medium"><li class="col">...</li></ul> */
.columns--3x\@medium .col {
  @include breakpoint(medium) {
    width: col-span(4,medium);

    &:nth-child(4n+1) {
      clear: none;
    }
    &:nth-child(3n+1) {
      clear: left;
    }
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
/*
/* columns individually specified
/*
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* an 8 column wide element: <div class="columns"><div class="col col--8x">...</div></div> */
.col--8x {
  width: col-span(8,large);

  @include breakpoint(medium) {
    width: col-span(8,medium);
  }
  @include breakpoint(small) {
    width: 100%;
  }
}

/* an 10 column wide element on medium breakpoint override: <div class="columns"><div class="col col--8x col--10x@medium">...</div></div> */
.columns .col--10x\@medium {
  @include breakpoint(medium) {
    width: col-span(10,medium);
  }
  @include breakpoint(small) {
    width: col-span(6,small);
  }
}

functions.scss

/* a function to return a pixel value width based on breakpoint, or in the case of the smallest breakpoint returns a css calc */
@function col-span($n:1,$breakpoint:'large') {
  @if map-has-key($breakpoints, $breakpoint) {
    @if $breakpoint == 'large' {
      @return ($n * map-get($columnWidths, large)) + (($n - 1) * map-get($gutters, large));
    }
    @if $breakpoint == 'medium' {
      @return ($n * map-get($columnWidths, medium)) + (($n - 1) * map-get($gutters, medium));
    }
    @if $breakpoint == 'small' {
      @return calc((((100vw - #{7 * map-get($gutters, small)}) / 6) * #{$n}) + #{($n - 1) * map-get($gutters, small)});
    }
  }
}

mixins.scss

@mixin breakpoint($point) {
  @if map-has-key($breakpoints, $point) {
    @media #{map-get($breakpoints, $point)} {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint `#{$point}` in $breakpoints.";
  }
}

variable.scss

$breakpoints: (
  large: "(min-width: 1021px)",
  medium: "(max-width: 1020px)",
  small: "(max-width: 750px)"
);

$main_col_widths: (
  large: 980px,
  medium: 690px,
  small: 100%
);

$gutters: (
  large: 40px,
  medium: 30px,
  small: 20px
);

$columnWidths: (
  large: 45px,
  medium: 30px
);