Marcação responsiva e semântica usando Twitter Bootstrap e Sass / SCSS

Enquanto trabalhava no front-end para um site de conferência futura usando Twitter Bootstrap (via bootstrap-sass ), tentei usar os mixins auxiliares de marcação semântica padrão (makeRow () e makeColumn ()), mas descobri que eles não respondiam.

Aqui estão alguns mixins auxiliares que criei para corrigir esse problema.

@mixin respond-to($media) {
    @if $media == phone {
        @media (max-width: 767px) { @content; }
    }
    @if $media == except-phone {
        @media (min-width: 768px) { @content; }
    }
    @if $media == tablet {
        @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    @if $media == desktop {
        @media (min-width: 1200px) { @content; }
    }
}

@mixin row() {
    margin-left: $gridGutterWidth * -1;
    @media (max-width: 767px) { margin-left: 0; }
    @media (min-width: 768px) and (max-width: 979px) { margin-left: $gridGutterWidth768 * -1; }
    @media (min-width: 1200px) { margin-left: $gridGutterWidth1200 * -1; }
    @include clearfix();
}

@mixin column($columns: 1, $offset: 0) {
    float: left;
    margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
    @media (max-width: 767px) {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        @include box-sizing(border-box);
    }
    @media (min-width: 768px) and (max-width: 979px) {
    margin-left: ($gridColumnWidth768 * $offset) + ($gridGutterWidth768 * ($offset - 1)) + ($gridGutterWidth768 * 2);
    width: ($gridColumnWidth768 * $columns) + ($gridGutterWidth768 * ($columns - 1));
}
    @media (min-width: 1200px) {
        margin-left: ($gridColumnWidth1200 * $offset) + ($gridGutterWidth1200 * ($offset - 1)) + ($gridGutterWidth1200 * 2);
        width: ($gridColumnWidth1200 * $columns) + ($gridGutterWidth1200 * ($columns - 1));
    }
}

Você pode encontrar o código mantido e atualizado aqui: https://gist.github.com/4527826