Loop com SCSS para sistema de grid

#css #scss #html #javascript

Código em SCSS

.container {
  margin: 0 auto;
  width: 99%;
  @media (min-width: 700px) {
    width: 90%;
  }
}
// Cols
$grid-columns: 12;
[class*="col-"] {
  padding: 0 15px;
}
@media (min-width: 700px) {
  @for $i from 1 through $grid-columns {
    .col-#{$i} {
      width: percentage($i / $grid-columns);
    }
  }
}
// Row
.row {
  display: flex;
  align-items: center;
  flex-direction: column;
  @media (min-width: 700px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

Código no HTML

<div class="container">
    <div class="row">
        <div class="col-12">Exemplo de grid</div>
        <div class="col-6">Exemplo de grid</div>
        <div class="col-6">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
        <div class="col-4">Exemplo de grid</div>
    </div>
</div>