Amit Dhamu

Software Engineer

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

Redirect To Intended Page After LoginShare Variables Across All Views

Show Comments

Made with by Amit Dhamu.
© MMXX. All rights reserved.