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