How to make a semantic classes with twitter grid functionality.

example.less

// Example usage

.row {
  #fixed .row()
}

.row-fluid {
  #fluid .row()
}

.main {
  #fixed .span(8);
}

.sidebar {
  #fixed .span(4)
}

semantic_grid.less

// A semantic cersion of bootstrap grid system.
// Usage:
//
//   Replace `@import "grid.less";` with `@import "semantic_grid.less";`
//
// WARNING: With this you won't be able to use a responsive grid.
// Unless you add .row .row-fluid and .span classes to every element including responsive mixin.
//
// Reason for this are catch-all overrides using [class*=span] in responsive.less

// Core variables and mixins
@import "./twitter/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "./twitter/bootstrap/mixins.less";

#fluid {
  .span (@columns) {
    width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
    
    float: left;
    margin-left: @fluidGridGutterWidth;
        
    &:first-child {
      margin-left: 0;
    }
  }
                                                                                                               
  .row() {                                                                                                     
    width: 100%;                                                                                               
    .clearfix();                                                                                               
  }                                                                                                            
}                                                                                                              
                                                                                                               
#fixed {                                                                                                       
  .offset (@columns) {
    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); 
  }                                                                                                            

  .spanWidth(@columns) {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }

  .span (@columns) {
    .spanWidth(@columns);
    float: left;
    margin-left: @gridGutterWidth;
  }

  .row() {
    margin-left: @gridGutterWidth * -1;
    .clearfix();
  }
}

#input {
  .span(@columns) {
    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
  }
}


.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { #fixed .spanWidth(@gridColumns); }