Pattern that adds a different value to the same attribute for many classes
You can minimize your SASS code using @each and nesting for :hover

.parent-div a {
  border-bottom: 10px solid;

  @each $color in blue, red, green, yellow, pink, purple { // Iterate through colors
    .#{$color} &amp; {
      border-color: $color;

      &amp;:hover { // Nested inside
        border-color: darken($color, 10%);
      }
    }
  }
}


which compiles to the following output

Codepen Demo


.parent-div a {
  border-bottom: 10px solid;
}
.blue .parent-div a {
  border-color: blue;
}
.blue .parent-div a:hover {
  border-color: #0000cc;
}
.red .parent-div a {
  border-color: red;
}
.red .parent-div a:hover {
  border-color: #cc0000;
}
.green .parent-div a {
  border-color: green;
}
.green .parent-div a:hover {
  border-color: #004d00;
}
.yellow .parent-div a {
  border-color: yellow;
}
.yellow .parent-div a:hover {
  border-color: #cccc00;
}
.pink .parent-div a {
  border-color: pink;
}
.pink .parent-div a:hover {
  border-color: #ff8da1;
}
.purple .parent-div a {
  border-color: purple;
}
.purple .parent-div a:hover {
  border-color: #4d004d;
}
&lt;div class="parent-div"&gt;
  &lt;a href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="blue"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="red"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="green"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="yellow"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="pink"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="purple"&gt;
  &lt;div class="parent-div"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;




But the above code seems to carry little logic. I think you were looking to nest the color classes after parent element like this:

.parent-div a {
  border-bottom: 10px solid;

  @each $color in blue, red, green, yellow, pink, purple { // Iterate through colors
     &amp;.#{$color} {
      border-color: $color;

      &amp;:hover { // Nested inside
        border-color: darken($color, 10%);
      }
    }
  }
}


which would be logically correct and with better HTML and CSS syntax: 

Codepen Demo



.parent-div a {
  border-bottom: 10px solid;
}
.parent-div a.blue {
  border-color: blue;
}
.parent-div a.blue:hover {
  border-color: #0000cc;
}
.parent-div a.red {
  border-color: red;
}
.parent-div a.red:hover {
  border-color: #cc0000;
}
.parent-div a.green {
  border-color: green;
}
.parent-div a.green:hover {
  border-color: #004d00;
}
.parent-div a.yellow {
  border-color: yellow;
}
.parent-div a.yellow:hover {
  border-color: #cccc00;
}
.parent-div a.pink {
  border-color: pink;
}
.parent-div a.pink:hover {
  border-color: #ff8da1;
}
.parent-div a.purple {
  border-color: purple;
}
.parent-div a.purple:hover {
  border-color: #4d004d;
}
&lt;div class="parent-div"&gt;
  &lt;a href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="blue" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="red" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="yellow" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="green" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="yellow" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="pink" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;
&lt;div class="parent-div"&gt;
  &lt;a class="purple" href="#"&gt;Test&lt;/a&gt;
&lt;/div&gt;