Front End Development has come a long way over the years. We now have a range of ever expanding technologies and methodologies that make our jobs easier, and more fun to do. Sometimes it can be hard to keep up with, and to know which you should bother learning, because in a year it might be completely redundant. One development however, which has become a must have for developers is Sass.
For years CSS has not been a good friend of a developer. It was long winded and tedious. Being able to use variables or any basic programming tools, was nothing more than a dream.
Along came CSS preprocessors. Allowing us to finally approach styling our websites with logic.
Sass being adopted by most and for good reason. CSS actually became fun to use, here are just a few of the main features that Sass offers.
In the past, if we wanted to set the website’s font, theme colour we would have to set the colour for every element that needed a colour, or a different font.
Sass variables allow us to set a global value for anything that we might want to use again. We can create a variable for nearly every css property.
We can use these variables anywhere and everywhere. This feature alone makes CSS that much easier. We no longer have to crawl through endless lines of CSS to change the main theme colour on our site. Now we change one variable, and sass does the rest.
2. Nesting Classes
In CSS if we wanted to style multiple child elements we would have type out every single class multiple times, which is not only tedious and long winded, also really easy to make mistakes.
We simply write:
This is not only considerably quicker, but is also much easier to read.
3. Colour Properties
In sass we can manipulate the properties of a colour having to go and get a new colour code.
For example we have a button we that needs a hover effect. We can tell sass darken, lighten or adjust it’s alpha settings.
When compiled sass will calculate the correct colour code, and set it for you.
While CSS does have @import, it can’t do the same things ass the Sass @import.
@import in sass, will grab another sass file, and will use any css which is inside that file. This means that your website will only ever be making one HTTP/HTTPS request for it’s styling, and you can keep all your files well organised.
style.scss is our main css file.
On compiling sass will grab all snippets of css in each imported file, and compile it together.
This means you can have a nicely organised file system, and separate out your css, so it is easy to find later.
You can also very easily control how your CSS will load on the page. So if you wanted particular styles to load first, like theme colours and base fonts. You would place your imports for _typography.scss and _variables.scss at the top of the styles.scss.
This is great for ensuring that the most important CSS is the first thing to load when someone visits your site.
Mixins can be a little tricky to get the hang off when first starting out, but are a very powerful tool.
Say you have a css property that requires webkit extensions to work across different browsers. You can use a mixin to preset extensions and only have to type one line of css. This is great for things like Flexbox or transitions.
@extend allows us to share css to different classes, without having to type the same thing over and over again.
Say we have multiple buttons on our site, there’s a good chance that they will have the same basic styling, with the only difference being colours. With extend we can set a base styling, and add it on to our buttons.
5. Code Optimisation
When sass is compiled you can choose how your css file will look.
You can tell sass to minify all the css, and remove comments, to help make your css file as small as possible, and when used with Node you can have a very sophisticated compiler which will deliver the most efficient css, which is not only fast, but works in nearly all browsers (IE is still going to be a problem I’m afraid).
This is just the tip of the iceberg oh what Sass can do for you. There are so many other useful functions that just make styling your website so much easier.
After a week you’ll wonder what you ever did without it.