Generated by SassMeister.com.

input.scss

$grd-dir-0deg: 0deg;
$grd-dir-45deg: 45deg;
$grd-dir-90deg: 90deg;
$grd-dir-180deg: 180deg;
$grd-dir-225deg: 225deg;
$grd-dir-270deg: 270deg;
$grd-dir-315deg: 315deg;
$grd-theme-1: linear-gradient(
  $grd-dir-45deg,
  #2d2d8f 10%,
  #006fba 50%,
  #21fceb 94%
);
$grd-theme-2: linear-gradient(
  $grd-dir-45deg,
  #010065 15%,
  #d43635 65%,
  #f3c9ce 100%
);
$grd-theme-3: linear-gradient(
  $grd-dir-45deg,
  #5e93ef 10%,
  #c7ed88 65%,
  #eee2a0 85%,
  #efe34a 100%
);

$breakpoint-classes: (small, medium);
$border-width: 1;
$border-side: (
  "t": top,
  "r": right,
  "b": bottom,
  "l": left,
);

$border-gradient-palette: (
  grd-theme-1: $grd-theme-1,
);


$background-colors-list: #4BC2A5 #606F40 #6648CA #6B6022 #2F54E9;
$border-colors-list: #ff9900 #77ff66 #73C227 #C23E50 #7BAFC2;
$colors-list: #111 #222 #111 #444 #555;
@for $i from 1 through length($colors-list) {
    .stuff-#{$i} {
        color: nth($colors-list, $i);
        background-color: nth($background-colors-list, $i);
        border: 1px solid nth($border-colors-list, $i);
    }
}


@for $i from 1 through length($border-width) {
        @each $side-name, $side in $border-side {
          @each $color-name, $color in $border-gradient-palette {
            .bd-#{$side-name}-#{$color-name}-#{$i} {
              border-#{$side}: #{$i}px solid;
              border-image: $color 1;
            }
          }
        }
      }
      
      

output.css

.stuff-1 {
  color: #111;
  background-color: #4BC2A5;
  border: 1px solid #ff9900;
}

.stuff-2 {
  color: #222;
  background-color: #606F40;
  border: 1px solid #77ff66;
}

.stuff-3 {
  color: #111;
  background-color: #6648CA;
  border: 1px solid #73C227;
}

.stuff-4 {
  color: #444;
  background-color: #6B6022;
  border: 1px solid #C23E50;
}

.stuff-5 {
  color: #555;
  background-color: #2F54E9;
  border: 1px solid #7BAFC2;
}

.bd-t-grd-theme-1-1 {
  border-top: 1px solid;
  border-image: linear-gradient(45deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%) 1;
}

.bd-r-grd-theme-1-1 {
  border-right: 1px solid;
  border-image: linear-gradient(45deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%) 1;
}

.bd-b-grd-theme-1-1 {
  border-bottom: 1px solid;
  border-image: linear-gradient(45deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%) 1;
}

.bd-l-grd-theme-1-1 {
  border-left: 1px solid;
  border-image: linear-gradient(45deg, #2d2d8f 10%, #006fba 50%, #21fceb 94%) 1;
}

settings.json

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