d
Amit DhamuSoftware Engineer
 

Generate Colour Classes in SASS

1 minute read 00000 views
Colours Array
$colours: (
  yellow #ffd800,
  pink #ff0099,
  lime #b0eb00,
  red #ff0000,
  blue #000099,
  orange #fe7000
);
Function To Generate Classes
@each $colour in $colours {
  .#{nth($colour, 1)}-text {
    color: #{nth($colour, 2)};
  }

  .#{nth($colour, 1)}-bg {
    background-color: #{nth($colour, 2)};
  }
}
Resulting CSS
.yellow-text {
  color: #ffd800;
}

.yellow-bg {
  background-color: #ffd800;
}

.pink-text {
  color: #ff0099;
}

.pink-bg {
  background-color: #ff0099;
}

.lime-text {
  color: #b0eb00;
}

.lime-bg {
  background-color: #b0eb00;
}

.red-text {
  color: #ff0000;
}

.red-bg {
  background-color: #ff0000;
}

.blue-text {
  color: #000099;
}

.blue-bg {
  background-color: #000099;
}

.orange-text {
  color: #fe7000;
}

.orange-bg {
  background-color: #fe7000;
}