← Go Back

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;
    }