@mixin text($font-size,$color,$bg-color) {

     // we pass the $font-size to font-size property
    font-size: $font-size;
    
    // we pass the $color to color property
    color: $color;
    
    // we pass the $bg-color to background property
    background: $bg-color;
}



.text1 {
          // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
          // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}

@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);

@mixin auto-numbers($numbered-element, $sep, $counter: item, $nested-parent: false ){
    $sel: ();
    @if $nested-parent {
        $sel: append($sel, unquote($nested-parent));

        #{$nested-parent}{
            list-style: none;
            margin-left: 0;
        }
    }
    $sel: append($sel, unquote('&'), comma);

    #{$sel}{
        counter-reset: #{$counter};
        > #{$numbered-element}{
            &:before{
                counter-increment: #{$counter};
                content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}) "#{$sep} ") ;
            }
        }
    }
}