How CSS preprocessors save you time and money

#css #sass #frontenddeveloper #preprocessors

As growing programmers, our journey never ends when it comes to finding easy and efficient ways to complete our tasks.
Convenience and ease make us happier and most times more productive developers hence, the rapid growth of frameworks, libraries, preprocessors, etc in recent years.

CSS Preprocessors

CSS preprocessors are one of those convenient tools I was referring to in the above paragraph. These tools allow us to write CSS at a higher abstraction level, giving us the ability to automate a lot of ccs code we would have to write manually otherwise.
I know I know, we as programmers don't like having many dependencies in our projects. Don't worry, this code compiles down to CSS so it is only required in your development environment.
Here are some examples of the power CSS preprocessors bring to the table:
Css

This is an example of a column width grid system similar to bootstrap's columns.

.col-md-1 { flex: 0 0 8.3333333333%; } .col-md-2 { flex: 0 0 16.6666666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.3333333333%; } .col-md-5 { flex: 0 0 41.6666666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.3333333333%; } .col-md-8 { flex: 0 0 66.6666666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.3333333333%; } .col-md-11 { flex: 0 0 91.6666666667%; } .col-md-12 { flex: 0 0 100%; }

SASS

I personally use SASS preprocessor, here is the SASS that created the above CSS.

$columns: 12; @for $i from 1 through $columns { .col-md-#{$i} { flex: 0 0 100% / $columns * $i; } }

Four lines of SCSS code vs twenty-four lines of CSS. If that does not WOW!! you, you must be Steve Jobs lol. This was the first thing that made me fall in love with CSS preprocessors. You already benefited when reading the SCSS code above because you saved a couple of seconds as opposed to the prior CSS code.

Sass features

Some features and treats that sass offers are as follows:
. Variables
Although we can use variables now in ccs3, this was once impossible to do which you can imagine lead to a lot of unhappiness.

$text-color: red;

.Mixins

Mixins are a very powerful feature in SCSS. It allows us to reuse our code respecting the programmer's code of honor: don't repeat yourself. We can also pass parameters so it's basically a function.

@mixin box-sizing($parameter){ -webkit-box-sizing:$parameter; -moz-box-sizing:$parameter; box-sizing:$parameter; } .no-padding{ @include box-sizing(padding-box);} .no-border{@include box-sizing(border-box) }

.Control Directives

These essential features offer a world of possibilities.

.@if

$bg-color: black; $text-white: white; $text-grey:grey; @if $bg-color==black { color:$text-white;} @else{color:$text-grey;}

.@for

$columns: 12; @for $i from 1 through $columns { .col-md-#{$i} { flex: 0 0 100% / $columns * $i;} }

.@each

@each $color in blue, red, green{ .text-#{$color} { color:#{color}; } }

.Extend

Extend helps keeps your CSS less bloated and it is only available in the instances they are used.

%use-me-when-you-need-me{ display-block;} .hidden{ @extends use-me-when-you-need-me;}

.Note

All CSS syntax works in SCSS
There are a lot more features at your fingertips so I will leave some references at the end of this article.

I don't know about you but this made me jump for joy. No more writing 1000+ lines of CSS manually thanks to the creators of SCSS Natalie Weizenbaum, Chris Eppstein, and contributors.

Getting Start

This is a Ruby implementation, although ruby support has now gone out the window.

1 Once you have ruby installed on your machine type

gem install haml

gem install sass

2 In your working directory add your SASS OR SCSS file ex: main.scss then and run this command.

sass --watch scss/main.scss:css/main.css

this will create a main.css file in a css folder. The - watch flag with keep a live link between the SCSS file and the CSS file and changes made to the SCSS file will be reflected in the CSS file immediately.

Good Practices

A good practice is to never edit the CSS file directly when using SCSSdoing so can cause issues with tracking you SCSS file won't have the code you wrote in the CSS file.

Conclusion

In these current times where personal, startups and even well-developed companies need to get work done at a rapid pace, tools like SCSS really shines.