scss Sass / Scss Loop

Posted 2021-05-18

.image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  @for $i from 1 through 4 {
      &--#{$i} {
          background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/apply/expect-'+ $i + '.jpg');
      }
  }
}

@for $i from 1 through 100 {
  .flex-xs-#{$i} {
    flex: 1 round(percentage($i/100)); // flex-xs-1 ... flex-xs-100
  }
}