Bootstrap 3's Grid (grid.less) converted into SCSS. View on codepen: http://codepen.io/andymcfee/pen/tBqmk I wanted to start using the new Bootstrap 3 grid in a project and I didn't want to wait for the Sass-bootstrap projects to update. So I ported grid.less into grid.scss. Et voila! You'll probably want to pull out the mixins and variables int…

grid.html

<div class="container">

  <h2>Bootstrap RC2 grids</h2>
  <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>

  <h4>Three equal columns</h4>
  <div class="row show-grid">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>

  <h4>Three unequal columns</h4>
  <div class="row show-grid">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>

  <h4>Two columns</h4>
  <div class="row show-grid">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>

  <h4>Full width, single column</h4>
  <p class="text-warning">No grid classes are necessary for full-width elements.</p>

  <h4>Two columns with two nested columns</h4>
  <div class="row show-grid">
    <div class="col-md-8">
      .col-md-8
      <div class="row show-grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">.col-md-4</div>
  </div>

  <h4>Mixed: mobile and desktop</h4>
  <div class="row show-grid">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
    <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
  </div>

  <h4>Mixed: mobile, tablet, and desktop</h4>
  <div class="row show-grid">
    <div class="col-sm-8 col-md-8">.col-md-8</div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">.col-xs-6 .col-md-4 .col-md-4 .col-lg-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">.col-xs-6 .col-md-4 .col-md-4 .col-lg-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">.col-xs-6 .col-md-4 .col-md-4 .col-lg-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">.col-xs-6 .col-md-4 .col-md-4 .col-lg-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-md-6</div>
    <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-md-6</div>
  </div>

</div> <!-- /container -->

grid.scss

@import 'compass';

* { @include box-sizing(border-box); }

/*------------------------------------*\
    $Variables
\*------------------------------------*/

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
$grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
$grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
$grid-float-breakpoint:     768px;


// Container sizes
// --------------------------------------------------

// Small screen / tablet
$container-tablet:          728px;

// Medium screen / desktop
$container-desktop:         940px;

// Large screen / wide desktop
$container-large-desktop:   1170px;


// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
$screen-xsmall:              480px;
$screen-phone:               $screen-xsmall;

// Small screen / tablet
$screen-small:               768px;
$screen-tablet:              $screen-small;

// Medium screen / desktop
$screen-medium:              992px;
$screen-desktop:             $screen-medium;

// Large screen / wide desktop
$screen-large:               1200px;
$screen-large-desktop:       $screen-large;

// So media queries don't overlap when required, provide a maximum
$screen-small-max:           ($screen-medium - 1);
$screen-tablet-max:          ($screen-desktop - 1);
$screen-desktop-max:         ($screen-large-desktop - 1);




/*------------------------------------*\
    $Mixins
\*------------------------------------*/

// Centered container element
@mixin container-fixed {
  margin-right: auto;
  margin-left: auto;
  @include clearfix();
}

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  // Then clear the floated columns
  @include clearfix;

  .container {
    @media (min-width: $screen-small) {
      margin-left:  ($gutter / -2);
      margin-right: ($gutter / -2);
    }
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  ($gutter / -2);
    margin-right: ($gutter / -2);
  }
}

// Generate the columns
@mixin make-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: $grid-float-breakpoint) {
    float: left;
    width: percentage($columns / $grid-columns);
  }
}

// Generate the column offsets
@mixin make-column-offset($columns) {
  @media (min-width: $grid-float-breakpoint) {
    margin-left: $columns / $grid-columns;
  }
}
@mixin make-column-push($columns) {
  @media (min-width: $grid-float-breakpoint) {
    left: $columns / $grid-columns;
  }
}
@mixin make-column-pull($columns) {
  @media (min-width: $grid-float-breakpoint) {
    right: $columns / $grid-columns;
  }
}

// Generate the small columns
@mixin make-small-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  $max-width: ($grid-float-breakpoint - 1);

  // Calculate width based on number of columns available
  @media (max-width: $max-width) {
    width: percentage($columns / $grid-columns);
  }
}

/*------------------------------------*\
    $Grid system
\*------------------------------------*/

// Set the container width, and override it for fixed navbars in media queries
.container {
  @include container-fixed;
}

// Mobile-first defaults
.row {
  @include make-row;
}

// Common styles for small and large grid columns
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  $grid-gutter-width / 2;
  padding-right: $grid-gutter-width / 2;
}



//
// Container and grid column sizing
//

// Extra small grid
//
// Grid classes for extra small devices like smartphones. No offset, push, or
// pull classes are present here due to the size of the target

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}
.col-xs-1  { width: percentage(1 / $grid-columns); }
.col-xs-2  { width: percentage(2 / $grid-columns); }
.col-xs-3  { width: percentage(3 / $grid-columns); }
.col-xs-4  { width: percentage(4 / $grid-columns); }
.col-xs-5  { width: percentage(5 / $grid-columns); }
.col-xs-6  { width: percentage(6 / $grid-columns); }
.col-xs-7  { width: percentage(7 / $grid-columns); }
.col-xs-8  { width: percentage(8 / $grid-columns); }
.col-xs-9  { width: percentage(9 / $grid-columns); }
.col-xs-10 { width: percentage(10 / $grid-columns); }
.col-xs-11 { width: percentage(11 / $grid-columns); }
.col-xs-12 { width: 100%; }


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-tablet) {
  .container {
    max-width: $container-tablet;
  }

  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-1  { width: percentage(1 / $grid-columns); }
  .col-sm-2  { width: percentage(2 / $grid-columns); }
  .col-sm-3  { width: percentage(3 / $grid-columns); }
  .col-sm-4  { width: percentage(4 / $grid-columns); }
  .col-sm-5  { width: percentage(5 / $grid-columns); }
  .col-sm-6  { width: percentage(6 / $grid-columns); }
  .col-sm-7  { width: percentage(7 / $grid-columns); }
  .col-sm-8  { width: percentage(8 / $grid-columns); }
  .col-sm-9  { width: percentage(9 / $grid-columns); }
  .col-sm-10 { width: percentage(10 / $grid-columns); }
  .col-sm-11 { width: percentage(11 / $grid-columns); }
  .col-sm-12 { width: 100%; }

  // Push and pull columns for source order changes
  .col-sm-push-1  { left: percentage(1 / $grid-columns); }
  .col-sm-push-2  { left: percentage(2 / $grid-columns); }
  .col-sm-push-3  { left: percentage(3 / $grid-columns); }
  .col-sm-push-4  { left: percentage(4 / $grid-columns); }
  .col-sm-push-5  { left: percentage(5 / $grid-columns); }
  .col-sm-push-6  { left: percentage(6 / $grid-columns); }
  .col-sm-push-7  { left: percentage(7 / $grid-columns); }
  .col-sm-push-8  { left: percentage(8 / $grid-columns); }
  .col-sm-push-9  { left: percentage(9 / $grid-columns); }
  .col-sm-push-10 { left: percentage(10 / $grid-columns); }
  .col-sm-push-11 { left: percentage(11 / $grid-columns); }

  .col-sm-pull-1  { right: percentage(1 / $grid-columns); }
  .col-sm-pull-2  { right: percentage(2 / $grid-columns); }
  .col-sm-pull-3  { right: percentage(3 / $grid-columns); }
  .col-sm-pull-4  { right: percentage(4 / $grid-columns); }
  .col-sm-pull-5  { right: percentage(5 / $grid-columns); }
  .col-sm-pull-6  { right: percentage(6 / $grid-columns); }
  .col-sm-pull-7  { right: percentage(7 / $grid-columns); }
  .col-sm-pull-8  { right: percentage(8 / $grid-columns); }
  .col-sm-pull-9  { right: percentage(9 / $grid-columns); }
  .col-sm-pull-10 { right: percentage(10 / $grid-columns); }
  .col-sm-pull-11 { right: percentage(11 / $grid-columns); }

  // Offsets
  .col-sm-offset-1  { margin-left: percentage(1 / $grid-columns); }
  .col-sm-offset-2  { margin-left: percentage(2 / $grid-columns); }
  .col-sm-offset-3  { margin-left: percentage(3 / $grid-columns); }
  .col-sm-offset-4  { margin-left: percentage(4 / $grid-columns); }
  .col-sm-offset-5  { margin-left: percentage(5 / $grid-columns); }
  .col-sm-offset-6  { margin-left: percentage(6 / $grid-columns); }
  .col-sm-offset-7  { margin-left: percentage(7 / $grid-columns); }
  .col-sm-offset-8  { margin-left: percentage(8 / $grid-columns); }
  .col-sm-offset-9  { margin-left: percentage(9 / $grid-columns); }
  .col-sm-offset-10 { margin-left: percentage(10 / $grid-columns); }
  .col-sm-offset-11 { margin-left: percentage(11 / $grid-columns); }
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-desktop) {
  .container {
    max-width: $container-desktop;
  }
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1  { width: percentage((1 / $grid-columns)); }
  .col-md-2  { width: percentage((2 / $grid-columns)); }
  .col-md-3  { width: percentage((3 / $grid-columns)); }
  .col-md-4  { width: percentage((4 / $grid-columns)); }
  .col-md-5  { width: percentage((5 / $grid-columns)); }
  .col-md-6  { width: percentage((6 / $grid-columns)); }
  .col-md-7  { width: percentage((7 / $grid-columns)); }
  .col-md-8  { width: percentage((8 / $grid-columns)); }
  .col-md-9  { width: percentage((9 / $grid-columns)); }
  .col-md-10 { width: percentage((10/ $grid-columns)); }
  .col-md-11 { width: percentage((11/ $grid-columns)); }
  .col-md-12 { width: 100%; }
}

@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
  // Push and pull columns for source order changes
  .col-md-push-1  { left: percentage((1 / $grid-columns)); }
  .col-md-push-2  { left: percentage((2 / $grid-columns)); }
  .col-md-push-3  { left: percentage((3 / $grid-columns)); }
  .col-md-push-4  { left: percentage((4 / $grid-columns)); }
  .col-md-push-5  { left: percentage((5 / $grid-columns)); }
  .col-md-push-6  { left: percentage((6 / $grid-columns)); }
  .col-md-push-7  { left: percentage((7 / $grid-columns)); }
  .col-md-push-8  { left: percentage((8 / $grid-columns)); }
  .col-md-push-9  { left: percentage((9 / $grid-columns)); }
  .col-md-push-10 { left: percentage((10/ $grid-columns)); }
  .col-md-push-11 { left: percentage((11/ $grid-columns)); }

  .col-md-pull-1  { right: percentage((1 / $grid-columns)); }
  .col-md-pull-2  { right: percentage((2 / $grid-columns)); }
  .col-md-pull-3  { right: percentage((3 / $grid-columns)); }
  .col-md-pull-4  { right: percentage((4 / $grid-columns)); }
  .col-md-pull-5  { right: percentage((5 / $grid-columns)); }
  .col-md-pull-6  { right: percentage((6 / $grid-columns)); }
  .col-md-pull-7  { right: percentage((7 / $grid-columns)); }
  .col-md-pull-8  { right: percentage((8 / $grid-columns)); }
  .col-md-pull-9  { right: percentage((9 / $grid-columns)); }
  .col-md-pull-10 { right: percentage((10/ $grid-columns)); }
  .col-md-pull-11 { right: percentage((11/ $grid-columns)); }

  // Offsets
  .col-md-offset-1  { margin-left: percentage((1 / $grid-columns)); }
  .col-md-offset-2  { margin-left: percentage((2 / $grid-columns)); }
  .col-md-offset-3  { margin-left: percentage((3 / $grid-columns)); }
  .col-md-offset-4  { margin-left: percentage((4 / $grid-columns)); }
  .col-md-offset-5  { margin-left: percentage((5 / $grid-columns)); }
  .col-md-offset-6  { margin-left: percentage((6 / $grid-columns)); }
  .col-md-offset-7  { margin-left: percentage((7 / $grid-columns)); }
  .col-md-offset-8  { margin-left: percentage((8 / $grid-columns)); }
  .col-md-offset-9  { margin-left: percentage((9 / $grid-columns)); }
  .col-md-offset-10 { margin-left: percentage((10/ $grid-columns)); }
  .col-md-offset-11 { margin-left: percentage((11/ $grid-columns)); }
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-large-desktop) {
  .container {
    max-width: $container-large-desktop;
  }
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1  { width: percentage(1 / $grid-columns); }
  .col-lg-2  { width: percentage(2 / $grid-columns); }
  .col-lg-3  { width: percentage(3 / $grid-columns); }
  .col-lg-4  { width: percentage(4 / $grid-columns); }
  .col-lg-5  { width: percentage(5 / $grid-columns); }
  .col-lg-6  { width: percentage(6 / $grid-columns); }
  .col-lg-7  { width: percentage(7 / $grid-columns); }
  .col-lg-8  { width: percentage(8 / $grid-columns); }
  .col-lg-9  { width: percentage(9 / $grid-columns); }
  .col-lg-10 { width: percentage(10 / $grid-columns); }
  .col-lg-11 { width: percentage(11 / $grid-columns); }
  .col-lg-12 { width: 100%; }

  // Push and pull columns for source order changes
  .col-lg-push-1  { left: percentage(1 / $grid-columns); }
  .col-lg-push-2  { left: percentage(2 / $grid-columns); }
  .col-lg-push-3  { left: percentage(3 / $grid-columns); }
  .col-lg-push-4  { left: percentage(4 / $grid-columns); }
  .col-lg-push-5  { left: percentage(5 / $grid-columns); }
  .col-lg-push-6  { left: percentage(6 / $grid-columns); }
  .col-lg-push-7  { left: percentage(7 / $grid-columns); }
  .col-lg-push-8  { left: percentage(8 / $grid-columns); }
  .col-lg-push-9  { left: percentage(9 / $grid-columns); }
  .col-lg-push-10 { left: percentage(10 / $grid-columns); }
  .col-lg-push-11 { left: percentage(11 / $grid-columns); }

  .col-lg-pull-1  { right: percentage(1 / $grid-columns); }
  .col-lg-pull-2  { right: percentage(2 / $grid-columns); }
  .col-lg-pull-3  { right: percentage(3 / $grid-columns); }
  .col-lg-pull-4  { right: percentage(4 / $grid-columns); }
  .col-lg-pull-5  { right: percentage(5 / $grid-columns); }
  .col-lg-pull-6  { right: percentage(6 / $grid-columns); }
  .col-lg-pull-7  { right: percentage(7 / $grid-columns); }
  .col-lg-pull-8  { right: percentage(8 / $grid-columns); }
  .col-lg-pull-9  { right: percentage(9 / $grid-columns); }
  .col-lg-pull-10 { right: percentage(10 / $grid-columns); }
  .col-lg-pull-11 { right: percentage(11 / $grid-columns); }

  // Offsets
  .col-lg-offset-1  { margin-left: percentage(1 / $grid-columns); }
  .col-lg-offset-2  { margin-left: percentage(2 / $grid-columns); }
  .col-lg-offset-3  { margin-left: percentage(3 / $grid-columns); }
  .col-lg-offset-4  { margin-left: percentage(4 / $grid-columns); }
  .col-lg-offset-5  { margin-left: percentage(5 / $grid-columns); }
  .col-lg-offset-6  { margin-left: percentage(6 / $grid-columns); }
  .col-lg-offset-7  { margin-left: percentage(7 / $grid-columns); }
  .col-lg-offset-8  { margin-left: percentage(8 / $grid-columns); }
  .col-lg-offset-9  { margin-left: percentage(9 / $grid-columns); }
  .col-lg-offset-10 { margin-left: percentage(10 / $grid-columns); }
  .col-lg-offset-11 { margin-left: percentage(11 / $grid-columns); }
}


// Highlight the grid
.show-grid > div {
  background: rgba(#407FFF, .2);
  @include box-shadow(0 0 0 1px rgba(#407FFF, .4) inset);
  padding-top: 20px;
  padding-bottom: 20px;
}