« Back to Index

Sass mixin that handles span’ing content based off of a 12 column grid (could be updated to accept dynamic content)

View original Gist on GitHub

Grid.scss

/* =============================================================================
   Creates vendor-prefixed CSS declaration blocks in one go

   Example usage:
   @include vendor(box-sizing, border-box);

   Notes:
   Majority of the usage will be a basic property (that needs to be prefixed)
   followed by a corresponding value. 

   But when the user specifies the `@viewport` declaration as a property then 
   we need to branch off into a different scenario - Sass was bombing out with
   compile errors when trying to make the mixin 100% dynamic so we have to 
   hardcode `@viewport` (and prefixes).
   ========================================================================== */

@mixin vendor ($property, $value) {
  @if $property == viewport {
    @-webkit-viewport { width: $value; }
       @-moz-viewport { width: $value; }
        @-ms-viewport { width: $value; }
         @-o-viewport { width: $value; }
            @viewport { width: $value; }
  } @else {
    -webkit-#{$property}: $value;
       -moz-#{$property}: $value;
        -ms-#{$property}: $value;
         -o-#{$property}: $value;
            #{$property}: $value;
  }
}

@mixin span($numberOfColumnsToSpan, $includeLeftPadding: true) {
    @include vendor(box-sizing, border-box);

    $width: 100% / 12 * $numberOfColumnsToSpan; // 12 (number of columns in total) could be configurable via mixin argument
  
    $fix-blackberry-os5-rounding-issue: 0.00100066;

    @if $width == 50% {
      $width: $width - $fix-blackberry-os5-rounding-issue;
    }

    @if $includeLeftPadding {
        padding-left: 8px; // this could be a variable which is updated dynamically within media queries
    }

    width: $width;
}

// EXAMPLE USAGE...

.column1 {
    @include span(9, false); // we know this is the first column so don't include the left column
}

.column2 {
    @include span(2);
}