Why CSS Preprocessors are Amazing Tools for Front End Web Development.
At Mindutopia we’ve been using Sass as our preprocessor of choice for quite a while now, originally with the Compass Framework and more recently with lib sass and CodeKit. It has been a significant tool in helping us speed up development time and keep our style sheets clean and more easy to maintain. Below are a couple reasons I recommend you also take some time to work it into your process.
Use of variables: Because SASS is processed and then rendered into a simple CSS file you can declare variables that are easier to remember than other values. Changes applied to those variables will globally effect your SASS.
For example if you want to use a color in your projects, let’s say blue, with a hex value of #336699 and you used it through out your stylesheet. If you then wanted to change that blue to another color to revise the design to a hex value of #4f92a3, you would need to replace that first hex value anywhere you used it in your CSS. However, if you are using SASS you can declare a variable $blue and assign a value to it of #336699, when you feel like changing it, you just need update that variable definition, and anywhere the $blue value was used, it will be updated.
Functions and mix-ins: In programming languages you can define code to take one value and manipulate it somehow to achieve some other value – whether it be calculations, string concatenation, or any other manipulation. This can be a very useful helper and simplifying code. CSS doesn’t have that luxury, but SASS does. You can use logic operators, loops, conditionals, arithmetic operators, etc. that get processed before becoming CSS, so they can be regular old CSS that should be supported by older browsers ( depending on the CSS properties you used ) after you compile. This can also speed up scaffolding with loops if you have elements that need to be very similar.
Nesting syntax: When you define the styles for a selector you would normally have to place that before any styles you want to place inside of that element:
Ex CSS:
ul.nav{ display: block; }
ul.nav li{ display: inline-block; }
ul.nav li a{ color: #336699; }
However, with Sass you can nest rules so they read more easily and you don’t have to type the same thing over and over.
Ex SASS/SCSS:
ul.nav {
display: block;
li {
display: inline-block;
a{
color: $blue;
}
}
}
Extending and inheritance: You can define a selector and then reuse it with @extend. In the following example we can reuse our alert class and style it contextually.
EX:
.alert {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .alert;
border-color: $green;
}
.error {
@extend .alert;
border-color: $red;
}
.warning {
@extend .alert;
border-color: $yellow;
}
Sass also helps keep your code clean with by helping you compartmentalize your code with imports. It makes debugging easier with automated line number comments ( so you can quickly see where rules from your CSS are in your SASS files). SASS can even get your code ready for production with minification automatically.
Most common HTML frameworks and libraries on the web these days come with SASS files to help you quickly manipulate the basic styles included to theme them more quickly.
To read more about SASS checkout http://sass-lang.com/