less framework 3 + compass-less-plugin (a few of the partials) + my mixins & usage

_5.sass

/* 5-column layout
 * For 480 px mobiles, narrow browsers, and landscape iPhones. */

@media only screen and (max-width: 767px) and (min-width: 480px)
  body
    @include grid(5)
    @include mobile-safari

    +whole
    .torso
      +lf3(5)

    #app_contact
      #contact
        float: none
        +lfc(5)
      #explain
        float: none
        +lfc(4)

    +headflash_width(5)

_8.sass

/* Default 8-column layout
 * For tablets at 768 px, netbooks, and old browsers. */

body
  @include grid(8)

  +whole
  .torso
    +lf3(8)

  #app_contact
    #contact
      +lfc(5, 2, false)
    #explain
      +lfc(3, 2)

  +headflash_width(5)

_base.sass

@import vars

$less-column-width: 60px
$less-gutter-width: 24px
$less-bumper-width: $bumper-width

@import lessframework/grid
@import styles_spread

_styles_spread.sass

// resets less-framework-3's padding / all is 100%
=whole
  padding:
    top: 0px
    left: 0px
    right: 0px
  width: 100%

// the overall width and margins (depending on each partial's # of $columns)
=lf3($columns)
  $width: $columns * $less-column-width + ($columns - 1) * $less-gutter-width
  width: $width
  margin:
    left: $less-bumper-width
    right: auto

// similar to =column (compass-less-plugin's @mixin)
=lfc($columns, $pieces: 1, $last: true)
  $width: $columns * $less-column-width + ($columns - 1) * $less-gutter-width
  $right_space: $less-bumper-width / $pieces // shared compensation
  width: $width - $right_space
  @if $last != true
    margin-right: $less-gutter-width

// this width is confusing (yet it's fine for sizing my headflash balloons)...
=headflash_width($columns)
  #headflash
    width: $columns * $less-column-width + ($columns - 2) * $less-gutter-width