Pattern that adds a different value to the same attribute for many classes

Question

The purpose of this question is to get some advice for improving the following code in order to make it less repetitive.

.parent-div a {
  border-bottom: 10px solid;
  .blue & {
    border-color: $blue;
  }
  .red & {
    border-color: $red;
  }
  .green & {
    border-color: $green;
  }
  .pink & {
    border-color: $pink;
  }
  .yellow & {
    border-color: $yellow;
  }
  .purple & {
    border-color: $purple;
  }
  // here comes again all the styles but for each hovered anchor
 .blue &:hover {
    border-color: darken($blue, 10%);
  }
 .red &:hover {
     border-color: darken($red, 10%);   
  }
}

Answer 1

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} & {
      border-color: $color;

      &: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;
}

<div class="parent-div">
  <a href="#">Test</a>
</div>
<div class="blue">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>
<div class="red">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>
<div class="green">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>
<div class="yellow">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>
<div class="pink">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>
<div class="purple">
  <div class="parent-div">
    <a href="#">Test</a>
  </div>
</div>

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
     &.#{$color} {
      border-color: $color;

      &: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;
}

<div class="parent-div">
  <a href="#">Test</a>
</div>
<div class="parent-div">
  <a class="blue" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="red" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="yellow" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="green" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="yellow" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="pink" href="#">Test</a>
</div>
<div class="parent-div">
  <a class="purple" href="#">Test</a>
</div>