style.scss

@for $row from 0 through 3 {
  @for $column from 0 through 3 {
    .position_#{$row}_#{$column}:not(.isMoving) {
      top: 110 * $row + 5;
      left: 110 * $column + 5;
    }
  }
}

@for $fromRow from 0 through 3 {
  @for $toRow from 0 through 3 {
    $name: row_from_#{$fromRow}_to_#{$toRow};

    @if $fromRow == $toRow {
      .#{$name} {
        top: 110 * $toRow + 5;
      }
    } @else {
      .#{$name} {
        animation-duration: 0.20s;
        animation-name: $name;
        animation-fill-mode: forwards;
      }

      @keyframes #{$name} {
        from {
          top: 110 * $fromRow + 5;
        }
        to {
          top: 110 * $toRow + 5;
        }
      }
    }
  }
}

@for $fromColumn from 0 through 3 {
  @for $toColumn from 0 through 3 {
    $name: column_from_#{$fromColumn}_to_#{$toColumn};

    @if $fromColumn == $toColumn {
      .#{$name} {
        left: 110 * $toColumn + 5;
      }
    } @else {
      .#{$name} {
        animation-duration: 0.20s;
        animation-name: $name;
        animation-fill-mode: forwards;
      }

      @keyframes #{$name} {
        from {
          left: 110 * $fromColumn + 5;
        }
        to {
          left: 110 * $toColumn + 5;
        }
      }
    }
  }
}