The Sass REPL

A Hidden Gem

Happy new year! In this short episode, we’ll look into how we can use the Sass REPL to generate colors for GitHub labels.

I’ve been trying to incorporate Scrum story points into my GitHub project, so that I can plan the progress of project more effectively. I will use labels to assign points to issues.

Sometimes I’m obsessed about colors. I want to give these labels different colors, so that the color becomes darker as point increases. Here’s the end result I want.

At first, I tried using Mac OS X’s color picker and pick the color for each label, but the colors looked too arbitrary. They don’t fade proportionally to these point values.

The darken() and lighten() function found in Sass came to my mind — that’s just what I want! What’s the quickest way to make use of them? So I typed sass -h.

    -i, --interactive     Run an interactive SassScript shell

For me, it’s an amazing discovery to know that Sass actually has a REPL. So, sass -i.

>> $color: #F9D4C1
#f9d4c1
>> darken($color, 3%)
#f8cab3

Now, you can generate the colors for other labels by adjusting the percentage of darkness to apply to $color. You can also use math like 3%*2.

Now I have a beautiful-looking Waffle board with story points!


Show your support

Clapping shows how much you appreciated Thai Pangsakulyanont’s story.