Redes SASS / SCSS. Está em nosso sangue.

Então, uh, temos usado essas grades desde que sabemos, e os designers (pelo menos aqui, na Indonésia) ainda não mudaram de seus velhos noventa e sessenta anos. E escrever aulas é uma merda. Então, aqui estamos nós, usando SASS na esperança de revolucionar a maneira como as pessoas pensam.

Vamos colocar os valores padrão primeiro …

$columns      : 12 !default;
$printlayout  : false !default;

Dê a eles algumas condições …

@if $columns == 12 {
  $base : 60px; $gutter:10px;
} @else if $columns == 16 {
  $base : 40px; $gutter:10px;
} @else if $columns == 24 {
  $base : 30px; $gutter:5px;
}

Embrulhe isso…

.container {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

@mixin container { @extend .container; }

E coloque alguns estilos básicos …

.grid {
  display:inline;
  float: left;
  position: relative;
  margin-left: $gutter;
  margin-right: $gutter;
}

Pegue um pedaço de sanduíche ..

@mixin grid($n,$first:false,$last:false,$move:0,$prefix:0,$suffix:0) {
  @extend .grid;
  width: $n * $base + ( ( 2 * ( $n - 1 )  * $gutter);
  @if $first == true {
    margin-left:0;
  }
  @if $last == true {
    margin-right:0;
  }
  @if $move != 0 {
    left: ( $move * $base) + ( $move * ( 2 * $gutter ) );
  }
  @if $prefix != 0 {
    padding-left: ( $prefix * $base) + ( $prefix * ( 2 * $gutter ) );
  }
  @if $suffix != 0 {
    padding-right: ( sufefix * $base) + ( $suffix * ( 2 * $gutter ) );
  }
}

Um gole de café …

@mixin printColums {
  @while $columns > 0 {
    .grid#{$columns} { @include grid($columns); }
    $columns: $columns - 1;
  }
}

@if $printlayout == true { @include printColums; }

Então fique alto:

// hey Treebeard, I thought you're a tree...

.shire {
  @include container;
  .frodo {
    @include grid(2,true);
  }
  .sam {
    @include grid($n:3,$move:2);
  }
}