DontBeAfraid.scss

//Variables
$main: #001b41;
$secondary: #465a75;
$main-blue: #003d8f;
$light-blue: #0b9dcc;
$soft-blue: #28cce8;
$secondary-blue: #3364a5;
$light: #fff;
$light-gray: #f6f7f8;
$article-blue: #0357a0;
$footer-blue: #0b2863;

// change _font-color file if more colors are added
$colors: $main, $secondary, $main-blue, $light-blue, $soft-blue, $secondary-blue, $light, $light-gray, $article-blue, $footer-blue;
$color-names: main, secondary, main-blue, light-blue, soft-blue, secondary-blue, light, light-gray, article-blue, footer-blue;

$side-name: "left", "right", "top", "bottom";

//Background & Border Colors
$i: 1;
@each $color in $colors {
  .bg-#{nth($color-names, $i)} {
    background-color: $color;
  }
  .border-#{nth($color-names, $i)} {
    border: solid 1px $color;
  }
  .#{nth($color-names, $i)} {
    color: $color;
  }
  $i: $i +1;
}

// change if more colors are added
@each $side in $side-name {
  @for $k from 1 through 10{
    .border-#{$side}-#{nth($color-names, $k)} {
      border-#{$side}: solid 1px #{nth($colors, $k)};
    }
  }
}

.border-none{
   border: none !important;
}