Simple Example of How Sass Can Speed Up Your Workflow
Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!
Some of the more experienced front end developers may have heard of the pre-processor named Sass. Sass is a file extension that converts into CSS and allows for a new, and most will agree improved way of coding for CSS. Sass allows for powerful mixins and variables to be used when coding. Where Sass is Used An example of where this may come in handy is if you were creating a website for a client where they wanted to use their style guide colours throughout their whole website. No problem I'll just add in your colours to the website as follows. See the Pen Convential CSS by Jack Davies(@Jackmoov2) on CodePen So you submit the 1st draft of the website to your client with the colours added. They love the layout and the body text. However, they aren't quite sure of their colour choices and want to change to a completely new theme. They want a slightly lighter version of every colour added. So then the problems start to become clear, to modify the 3 colours used throughout the website you need to manually update every entry, whether that's by coding manually, copying and pasting hex code or using 'find and replace' tools in text editors, the task is still longer than it needs to be. In a large website you may use the same hex code over and over again and have counts of 10, 100 maybe if you're unlucky a 1000 hex codes that are repeats of the same colours. So how does Sass provide a solution? Using Sass you can set up variables such as - $green = #AFF226; $purple = #21173C; $blue = #90EEDB; Now if you update the hex values used in the variables when the Sass is compiled to CSS it will add the hex value to the rules. This is a quicker way of managing the variables used in projects. To take this a step further, as mentioned earlier the client wanted to make these colours a slightly lighter version. Now we could once again manually perform this task by finding the hex value and using a colour wheel program to generate a lighter version of the hex code. However, with Sass, this is counter-intuitive as you can use what is called mixins. See the Pen Sass Alternative by Jack Davies(@Jackmoov2) on CodePen