sass SCSS vs Sass for loop syntax


Example

With the release of sass 3.3 and plus version the @if and else conditions syntax got same. we can now use expressions with not only scss but also sass.

sass syntax

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Compiled to

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

scss syntax

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

compiled to

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}