CSS Grid Loop 🌀

cssGrid.scss

$gtc: grid-template-columns;
$gtr: grid-template-rows;
$gcs: grid-column-start;
$gce: grid-column-end;
$grs: grid-row-start;
$gre: grid-row-end;

$gridOptions: (
    ("gtc", $gtc),
    ("gtr", $gtr),
    ("gcs", $gcs),
    ("gce", $gce),
    ("grs", $grs),
    ("gre", $gre)
);

  @each $gridOptions, $gridValue in $gridOptions {
    @for $number from 1 through 12 {
    .#{$gridOptions}-#{$number}{
      #{$gridValue}: $number;
    }
  }
}