Using The LESS CSS fade Method To Apply Opacity To A HEX Color

DRANK

When I define colors in my CSS (Cascading Stylesheets), I use HEX (Hexadecimal) values. Like #FF0099. To me, this is familiar and easy to read and to reason about. The only time I ever switch from HEX notation over to RGB notation is when I need to add an alpha-channel for opacity. Recently, however, while listening to the Syntax Podcast on CSS, Wes Bos dropped a tasty treat on me: LESS - my CSS preprocessor of choice - has a fade() method that will allow me to apply an opacity to a HEX value, resulting in an RGBa notation. This is awesome!Run this demo in my JavaScript Demos project on GitHub.To see this in action, I put together a tiny Angular 4 demo that renders a number of "faded" blocks over an image. In this case, I'm using Angular because I'm it's easy in my local setup; but, there's nothing about the use of fade() that requires Angular - you just need some sort of pipeline that will process your LESS files and generate CSS files. Here's my HTML markup:// Import the core angula…