[Loop for preprocessors] #css #sass #less

loop.scss

//https://css-tricks.com/how-to-write-loops-with-preprocessors/

//for
@for $i from 1 through 15 {
  div {
    &:nth-child(#{$i}) {
      &::after {
        content: "#{$i}";
      }
    }
  }
}

//while
$modifier: 0;
@while $modifier < 5 {
  .padding-#{$modifier} {
    padding: (10 * $modifier) + px;
  }
  $modifier: $modifier + 1;
}

//each 
@each $value in (left, right, center, justify) {
  .ta-#{$value} {
    text-align: $value;
  }
}

@each $value in (100, 300, 400, normal, 700, bold, 900) {
  .fw-#{$value} {
    font-weight: $value;
  }
}

$colors: (
  "orange": #f4511e,
  "blue": #1e88e5,
  "red": #f44336
);
@each $color, $i in $colors {
  .bg-color-#{$color} {
    background-color: $i;
  }
}
@each $color, $i in $colors {
  .color-#{$color} {
    color: $i;
  }
}

body {
  padding: 20px;
}