Amit Dhamu

Writes Code

Generate Colour Classes in SASS

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


sass / scss / colours / functions / css

← Share Variables Across All Views Default Parameter in Function →