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.