Introduction

One of the best parts about creating your own website is adding Style or CSS to bring your vision to life. Sometimes, with complex pseudo-classes and CSS combinations, it can be difficult to maintain your css later. Thankfully there are developers out there that feel you pain and have created add-ons to help make CSS maintainable and easy again. Pre-processros are the next evolution in CSS which extend your CSS code writing abilities. A pre-processor lets you write CSS differently, and when you are done, it will take your code and convert it into actual css that the browser can interpret. A great CSS pre-processor to work with is SASS, which allows great features like variables, mixins, and nesting to minify your CSS for optimization and easier to read. Let’s go over some of the features of SASS and why you should start using it today.

Variables

You may have heard about variables. Variables are a way for you to store a piece of code/ property within a name and use it again and again. This will make it easier to refer to something like a CSS color or Font-Family. Here is an example.

Nesting

The most useful, and more simple approaches to SASS is nesting. You may be familiar with targeting a child element within a parent like so : nav ul li a{color:blue;};. If you want to specify another element under the nav element, you have to write a whole new line of CSS code. Not anymore. With nesting, you can easily organize child selectors within the parent to reduce the amount of code you have to write. Here is an example.

Partials & Import

Have you ever written a great CSS reset but hate that you have to add a link in the head tag every time you start a project which adds to your http request? With SASS, you can create a partial file that can be used over and over. The best part about partials is it will not be read by the web browser until it is imported into your CSS. This will help reduce HTTP request as well as shorten your CSS file size. Here is an example of a partial being imported into a CSS file.

Mixins

If you have worked with CSS3, you know that the most annoying thing is to repetitively type in vendor prefixes. With Mixins, you can prevent yourself from rewriting a property with vendor prefixes like border-radius. In the example below we demonstrated how we can save time by creating a Mixin first, and give ourselves the ability to reuse that code over and over again within our .box class.

Extend

If you have a class with three properties, and would like to reuse those same three properties in other classes, you would normally write it like this.

If you wanted to add to the .success class, you would have to write it out and then to change this out later would be a nightmare. By Extending your classes, you can let other classes inherit those properties easily like so. Making it easier to maintain and edit in the future.

Operators

The last great feature included in SASS is the use of operators. Operators can be used to do math within your CSS, very helpful for creating fluid layouts and getting pixel perfect pages. In the example you will see an operator being used to create a width in percentage.

If you ever felt that CSS is getting boring and over cumbersome, give SASS a try. Not only is it a great tool to learn, it will help you get passionate and start thinking about optimizing your CSS and site. You can download SASS here and get start having fun with CSS again.