How to use an @if condition into an @each control directive in SASS

each_and_if.scss

/* How to use an @if condition into an @each control directive in SASS */

// First, define your variables, here, we'll use colors only. 
$c-red : #f44336;
$c-pink: #E91E63;
$c-purple: #9c27b0;
$c-deeppurple: #673ab7;
$c-indigo : #3f51b5;
$c-blue: #2196F3;
$c-lightblue: #03a9f4;
$c-cyan : #00bcd4;
$c-teal : #009688;
$c-green : #4caf50;
$c-lightgreen : #8bc34a;
$c-lime: #cddc39;
$c-yellow: #ffeb3b;
$c-amber: #ffc107;
$c-orange : #ff9800;
$c-deeporange: #ff5722;
$c-brown : #795548;
$c-grey: #9e9e9e;
$c-bluegrey: #607d8b;

// Map them into a global $colors variable
$colors: (
  "red": $c-red,
  "pink": $c-pink,
  "purple": $c-purple,
  "deeppurple": $c-deeppurple,
  "indigo": $c-indigo,
  "blue": $c-blue,
  "lightblue": $c-lightblue,
  "cyan": $c-cyan,
  "teal": $c-teal,
  "green": $c-green,
  "lightgreen": $c-lightgreen,
  "lime": $c-lime,
  "yellow": $c-yellow,
  "amber": $c-amber,
  "orange": $c-orange,
  "deeporange": $c-deeporange,
  "brown": $c-brown,
  "grey": $c-grey,
  "bluegrey": $c-bluegrey
);


// Use a selector that is used more than one time on your project, for example, a button class.
.element{
  // We create an @each loop, with $name & $variable in the global $colors variable
  // For example our $name and $variable are "red": $c-red;
  @each $name, $variable in $colors {
    // And if this .element (button) got a "red" class ($name = red);
    &[class*="-#{($name)}"]{

      // Then, give it a $c-red background ( $variable = $c-red )
      background: #{($variable)};
      color: #fff;

      // But @if $name is not "red", but "Yellow","Amber","Lime" or "Grey"
      @if $name == 'yellow' 
        or $name == 'amber'
        or $name == 'lime'
        or $name == 'grey' { 

          // Then give them the desired background color, but change
          //the text/content color with a more contrasted color. (#000)
          background: #{($variable)};       
          color: #000;
        } 
    }
  }
}