Bootstrap 2.0 Grid Mixins — Less vs. Sass

_mixins.scss

//
// All sorts of better
//

// Le grid system
// -------------------------
// 
// Grid system builder for fixed, responsive and input grids
// 
@mixin gridSystem(
    $type: fixed, // fixed | responsive | input
    $columns: $gridColumns, 
    $columnWidth: if($type == responsive, $fluidGridColumnWidth, $gridColumnWidth), 
    $gutterWidth: if($type == responsive, $fluidGridGutterWidth, $fluidGridGutterWidth)
  ){
  @if $type == fixed {
    .row {
      margin-left: $gutterWidth * -1;
      @include clearfix;
    }
    [class*="span"] {
      float: left;
      margin-left: $gutterWidth;
    }
    @for $i from 1 through $columns {
      @if $i == $columns {
        .span#{$i},.container { width: ($columnWidth * $i) + ($gutterWidth * ($i - 1)); }
      } @else {
        .span#{$i} { width: ($columnWidth * $i) + ($gutterWidth * ($i - 1)); }
      }
    }
    @for $i from 1 through $columns {
      @if $i != $columns {
        .offset#{$i} { margin-left: ($columnWidth * $i) + ($gutterWidth * ($i - 1)) + ($gutterWidth * 2); }
      }
    }
  } @else if $type == responsive {
    .row-fluid {
      width: 100%;
      @include clearfix;
      > [class*="span"] {
        float: left;
        margin-left: $gutterWidth;
        &:first-child {
          margin-left: 0;
        }
      }
      @for $i from 1 through $columns {
        .span#{$i} { width: ($columnWidth * $i) + ($gutterWidth * ($i - 1)); }
      }
    }
  } @else if $type == input {
    input,textarea,.uneditable-input {
      @for $i from 1 through $columns {
        &.span#{$i} { width: (($gridColumnWidth) * $i) + ($gridGutterWidth * ($i - 1)) - 10; }
      }
    }
  }
}

mixins.less

//
// I don't know what exactly they're trying to pull by asking you to define @gridColumns
// in variables.less but hard-coding span1-12
//
// I've yet to actually try the build system, so I might discover something…
//

// Le grid system
// -------------------------
#gridSystem {
  // Setup the mixins to be used
  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  } 
  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
  }
  .gridColumn(@gridGutterWidth) {
    float: left;
    margin-left: @gridGutterWidth;
  }
  // Take these values and mixins, and make 'em do their thang
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    // Row surrounds the columns
    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }
    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
    [class*="span"] {
      #gridSystem > .gridColumn(@gridGutterWidth);
    }
    // Default columns
    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
    .span12,
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    // Offset column options
    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
  }
}

// Fluid grid system
// -------------------------
#fluidGridSystem {
  // Setup the mixins to be used
  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  } 
  .gridColumn(@fluidGridGutterWidth) {
    float: left;
    margin-left: @fluidGridGutterWidth;
  }
  // Take these values and mixins, and make 'em do their thang
  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
    // Row surrounds the columns
    .row-fluid {
      width: 100%;
      .clearfix();

      // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
      > [class*="span"] {
        #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
      }
      > [class*="span"]:first-child {
        margin-left: 0;
      }
      // Default columns
      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
    }
  }
}



// Input grid system
// -------------------------
#inputGridSystem {
  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
  }
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    input,
    textarea,
    .uneditable-input {
      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    }
  }
}

also sass lets you use namespacing inside a grid mixin
example: https://gist.github.com/mpalpha/5851818