Example of tiny, smalll and large column and shortcuts for bootstrap 3.0.x grid

application.css.scss

// Grid shortcuts
// use with https://github.com/anjlab/bootstrap-rails
//
// Columns for phones
//  - columns: .x[1-12]
// For small devices (tablets and small desktops)
//  - columns: .s[1-12]
//  - offsets: .so[0-11]
//  - pushes:  .sr[0-11]
//  - pulls:   .sl[0-11]
// For medium devices (desktop and up)
//  - columns: .m[1-12]
//  - offsets: .mo[0-11]
//  - pushes:  .mr[0-11]
//  - pulls:   .ml[0-11]
// Columns, offsets, pushes, and pulls for the large desktop device range.
//  - columns: .l[1-12]
//  - offsets: .lo[0-11]
//  - pushes:  .lr[0-11]
//  - pulls:   .ll[0-11]
//
// Example in slim
//  .row
//    .s6.so0.l5.lo1
//      div style='background:red'
//        ' red: full row on tiny devices, half screen on tablets and 5/12 with offset 1 on large screens
//    .s6.l5
//      div style='background:yellow'
//        ' yellow: full row on tiny devices, half screen on tablets and 5/12 on large screens


@import 'twitter/bootstrap';

@function make-short-columns-selector($classes: (x, s, m, l), $columns: $grid-columns) {
  $list: ();
  @for $i from 1 through $columns {
    @each $class in $classes {
      $list: append($list, unquote(".#{$class}#{$i}"), comma);
    }
  }
  @return $list;
}

@mixin make-short-grid-columns-float($class) {
  $list: make-short-columns-selector($class, $grid-columns - 1);

  #{$list} {
    float: left;
  }
}

@mixin calc-short-grid($index, $class, $type, $offsets: true) {
  @if $index > 0 {
    .#{$class}#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }

  @if $offsets && $index < $columns
    .#{$class}r#{$index} {
      left: percentage(($index / $grid-columns));
    }
    .#{$class}l#{$index} {
      right: percentage(($index / $grid-columns));
    }
    .#{$class}o#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}

@mixin make-short-grid($columns, $class, $type, $offsets: true) {
  @for $i from 0 through $columns {
    @include calc-short-grid($i, $class, $type, $offsets);
  }
}


// Common styles for small and large grid columns
@include make-grid-columns($list: make-short-columns-selector());


// 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.
//
// Note that `.x12` doesn't get floated on purpose--there's no need since
// it's full-width.

@include make-short-grid-columns-float(x);
@include make-short-grid($grid-columns, x, $offsets: false);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.s12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-sm-min) {
  .container {
    width: $container-sm;
  }

  @include make-short-grid-columns-float(s);
  @include make-short-grid($grid-columns, s);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.m12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-md-min) {
  .container {
    width: $container-md;
  }

  @include make-short-grid-columns-float(m);
  @include make-short-grid($grid-columns, m);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.l12` doesn't get floated on purpose--there's no need since
// it's full-width.

@media (min-width: $screen-lg-min) {
  .container {
    width: $container-lg;
  }

  @include make-short-grid-columns-float(l);
  @include make-short-grid($grid-columns, l);
}

I got the following error,

Invalid CSS after " @if $offsets ": expected "{", was "&& $index < $co..."

Around Line no. 59
I'm not an expert in scss. Can you help me?

@sasikumar87: Does changing line 59 from:

@if $offsets && $index < $columns

to:

@if ($offsets && $index) < $columns

fix the problem? I'm not using these shortcuts, but thought I'd take a shot at helping.

does not work too ($type is missing). Seems it is necessary to provide some rules or statements for desired devices. Im new to bootstrap. Can please somebody give me some hints?

@sasikumar87: there is "{" missing in the end of the line and I used "and" instead of "&&"

i made it work with:

1. removing of $type variable since it is not used anywhere
2. declared $columns: 5; in scss file (it does not affect anything, just to remove compile error
3. using div class="l1" in html file to indicate column span of div section

I know my method breaks all idea of scalability, but at list it works and lets to play with it.