Generated by SassMeister.com.

input.scss

@mixin circle($i) {
  border-radius: 100%;
  height: $i;
  width: $i;
}

$base: #172A3A;
$number-of-slides: 5;

@mixin bg-clr($color, $slides) {
  $percent: 100 / $slides;
  
  @for $i from 1 through $slides {
    $value: lighten($color, ($i * $percent));
    &:nth-of-type(#{$i}) {
      background: $value; 
    }
  }
}

@mixin order($slides) {
  @for $i from 1 through $slides {
    &:nth-of-type(#{$i}) {
      order: #{$i}; 
    }
  }
}

slide {
    @include bg-clr($base, $number-of-slides);
    @include order($number-of-slides);
    display: grid;
    place-items: center;
}

output.css

slide {
  display: grid;
  place-items: center;
}
slide:nth-of-type(1) {
  background: #345f83;
}
slide:nth-of-type(2) {
  background: #5e93bf;
}
slide:nth-of-type(3) {
  background: #a7c4dc;
}
slide:nth-of-type(4) {
  background: #f0f5f9;
}
slide:nth-of-type(5) {
  background: white;
}
slide:nth-of-type(1) {
  order: 1;
}
slide:nth-of-type(2) {
  order: 2;
}
slide:nth-of-type(3) {
  order: 3;
}
slide:nth-of-type(4) {
  order: 4;
}
slide:nth-of-type(5) {
  order: 5;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}