_grid.sass

// settings
$std-n-cols: 12
$std-col-width: 54
$std-gutter-width: 30

// calculated constants
$std-page-width: ($std-n-cols * $std-col-width) + (($std-n-cols - 1) * $std-gutter-width)

@function column-width($n-cols, $col-width:$std-col-width, $gutter-width:$std-col-gutter)
    $column-widths: $n-cols * $col-width
    $gutter-widths: ($n-cols - 1) * $gutter-width
    @return $column-widths + $gutter-widths

@function percent-width($target, $context)
    @return ($target / $context) * 100%

@mixin column($n-cols, $context:$std-n-cols, $col-width:$std-col-width, $gutter-width:$std-gutter-width, $last:'false')
    float: left
    width: percent-width(column-width($n-cols, $col-width, $gutter-width), column-width($context, $col-width, $gutter-width))
    @if $last == 'true'
        margin-right: 0
    @else
        margin-right: percent-width($gutter-width, column-width($context, $col-width, $gutter-width))

@mixin prepend($n-cols, $context:$std-n-cols, $col-width:$std-col-width, $gutter-width:$std-gutter-width)
    padding-left: percent-width(column-width($n-cols, $col-width, $gutter-width), column-width($context, $col-width, $gutter-width))

@mixin append($n-cols, $context:$std-n-cols, $col-width:$std-col-width, $gutter-width:$std-gutter-width)
    padding-right: percent-width(column-width($n-cols, $col-width, $gutter-width), column-width($context, $col-width, $gutter-width))

@mixin push($n-cols, $context:$std-n-cols, $col-width:$std-col-width, $gutter-width:$std-gutter-width)

    margin-left: percent-width(column-width($n-cols, $col-width, $gutter-width), column-width($context, $col-width, $gutter-width))

@mixin pull($n-cols, $context:$std-n-cols, $col-width:$std-col-width, $gutter-width:$std-gutter-width)
    margin-left: -1 * percent-width(column-width($n-cols, $col-width, $gutter-width), column-width($context, $col-width, $gutter-width))
   

usage.sass

#elevator_pitch
        @include column(10, 12, $last: 'true')
        @include prepend(1, 12)
        @include append(1, 12)
        @include big-type
        @include light-text-shadow
        color: $heading-gray
        padding-top: 2em
        padding-bottom: 2em
        text-align: center
        letter-spacing: .03em
        line-height: 1.1em

        strong
            color: $impact-gray
        

    #how_it_works
        @include column(10, 12, $last: 'true')
        @include prepend(1)
        @include append(1)
        @include background(#{image-url("arrow01.png")} 34% 35% no-repeat, #{image-url("arrow02.png")} 66% 35% no-repeat)
        margin-bottom: 4em
        list-style: none
        
        .step
            @include column(3, 10)
            @include big-type
            @include light-text-shadow
            display: block
            text-align: center
            color: $impact-gray 
            font-weight: bold