Reasons to use SCSS

You've heard many people talking about how awesome is Sass/SCSS. Here's why:

• You can use for loops with SCSS. And yes regular CSS can't do that.

  @for $i from 1 through 7 {
    $hue: $i * 50;
    .box-#{$i} {
      background-color: hsl($hue, 80%, 70%);
    }
  }

• You can nest selectors. This is helpful when we only want children of a certain selector to have specific styles.

  .button {
    border-radius: 4px;
    border: 1px solid;
    &--warning {
      background: #ffda06;
      border-color: #f1b803;
    }
  }

• You can have functions that take in parameter and return things.

  $len: 6;
  $main-color: #F2E68E;
  
  @function createShades($color, $len) {
    $list: [];
    @for $i from 1 through $len {
      $val: $i * 3%;
      $color: darken($color, $val);
      $list: append($list, $color);
    } 
    @return $list;
  }
  
  $shadeList: createShades($main-color, $len);

• You can extend from other selectors using the @extend rule. (Not recommended)

  .box {
    width: 100px;
    height: 100px;
    background: #8460ff;
  }
  
  .container {
    @extend .box;
    border: 2px solid #9A8FEB;
  }

• Reusable mixins, which can be created with @mixin rule and used with the @include rule, we can avoid repetition and keep it DRY (don't repeat yourself).

  @mixin flex-center() {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container {
    @include flex-center;
  }
  
  .box {
    @include flex-center;
    width: 100px;
    height: 100px;
    background: #8460ff;
  }