DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

Sorting colours is a pain!

Image description

(Cover image by Garrick Ang)

I've written before about sorting colours, and this got me thinking about some work I'm doing in terms of converting some CSS to SCSS (with the proper use of CSS variables, I must add).

As such, I've been wading through some CSS, extracting colours, and then popping them into a :root CSS pseudo-class. I do this by looking for # and popping the colour into the function as and when I find them. The resulting text is well messy! I thought it couldn't be that hard to sort them similarly as employed in Google Sheets; so I came up with CSSColourSorter, which you're more than welcome to use or steal/borrow as you see fit.

It works by pasting in your whole :root directive - you'll then need to copy and paste the resulting test into your CSS/SCSS as noted before, though, sorting colours is a pain!

Colour Swatch

I've added a swatch beneath the textareas so you can see the new spectrum - mainly to check that I was doing things right!

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!