@for $i from 10 through 100 {
  @if $i % 10 == 0 {
    $percentage: $i*1%;
    .bg-primary-#{$i} {
      background-color: mix(white, $primary, $percentage) !important;
    }
    .text-primary-#{$i} {
      color: mix(white, $primary, $percentage) !important;
    }

    .bg-secondary-#{$i} {
      background-color: mix(white, $secondary, $percentage) !important;
    }
    .text-secondary-#{$i} {
      color: mix(white, $secondary, $percentage) !important;
    }

    .bg-info-#{$i} {
      background-color: mix(white, $info, $percentage) !important;
    }
    .text-info-#{$i} {
      color: mix(white, $info, $percentage) !important;
    }

    .bg-success-#{$i} {
      background-color: mix(white, $success, $percentage) !important;
    }
    .text-success-#{$i} {
      color: mix(white, $success, $percentage) !important;
    }


    .bg-danger-#{$i} {
      background-color: mix(white, $danger, $percentage) !important;
    }
    .text-danger-#{$i} {
      color: mix(white, $danger, $percentage) !important;
    }


  }
}