SASS Helpers: Grey RGB Helper

I found it annoying when defining grey RGB values in SASS you would repeat the same value three times.

rgb(150, 150, 150);

This annoyed me so I created a SCSS function as a helper to optimize my workflow.

The function is pretty straightforward. It grabs the value and returns the RGB value:


// returns grey RGB colours
@function grgb($greyScale) {
    @return rgb($greyScale, $greyScale, $greyScale);
}

Add this to your mixins file. Now when you define a Grey color do so like below:


.someclass{
    color: grgb(150);
    border: solid grgb(50) 1px;
}

The compiled CSS looks like this:


.someclass{
    color: rgb(150, 150, 150);
    border: solid rgb(50, 50, 50) 1px;
}

Happy coding.