Simple Grid with SASS

by Tableless Padrões Web

HTML

<div class="container">
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>
  <div class="grid-1">Coluna de 1</div>

  <div class="grid-2">Coluna de 2</div>
  <div class="grid-2">Coluna de 2</div>
  <div class="grid-2">Coluna de 2</div>
  <div class="grid-2">Coluna de 2</div>
  <div class="grid-2">Coluna de 2</div>
  <div class="grid-2">Coluna de 2</div>

  <div class="grid-3">Coluna de 3</div>
  <div class="grid-3">Coluna de 3</div>
  <div class="grid-3">Coluna de 3</div>
  <div class="grid-3">Coluna de 3</div>

  <div class="grid-4">Coluna de 4</div>
  <div class="grid-4">Coluna de 4</div>
  <div class="grid-4">Coluna de 4</div>
  
  <div class="grid-6">Coluna de 6</div>
  <div class="grid-6">Coluna de 6</div>

  <div class="grid-12">Coluna de 12</div>
</div>

SCSS

$grid-gutter: 1%;
$grid-columns: 12;
$grid-max: 980px;
* {
    box-sizing: border-box;
}
////
// Grids
////
[class*="grid-"] {
  background: lightgray;
  outline: 1px solid gray;
  float: left;
  padding: 0 $grid-gutter;
  margin-bottom: 20px;
}

@for $i from 1 through $grid-columns{ 
  .grid-#{$i} {
    width: 100% / $grid-columns * $i;
  }
}