Front-End Web Development

Introduction to SASS

SASS stands for Syntactically Awesome Style Sheet. It is basically a pre-processor  to CSS. What does that mean is, we’ll write in SASS which gets transpiled to CSS and then parsed by the browser to load the styles of our site.

Why SASS?
If you know about a famous software engineering principle, DRY which stands for Don’t Repeat Yourself, you’ll that CSS is not DRY, there are many cases, where we have to repeat the code and also our efforts. Let’s take an example to prove it.

In the shown example code, you’ll see a box with red background, a link with red color, and another box with red border. Normally, for the sake of consistency, designers gives same color or dimensions to different elements at the sites. Now, if you want to change all from Red to Blue, you have to move all the way from top to bottom to change red to blue for each element and it is not DRY.

So, what programming construct can be helpful here? Of course Variables.
If you could defines a variable and give it red color,  you can change that anytime to some other color. Here becomes SASS useful by supporting Variables. Consider the same example with SASS  $color variable which starts with $ sign.

Next, you can see, that I have also made another variable $dimension, which replaced 50px everywhere in the code. I used this to explain the second feature of SASS i.e. Operators. As hollow box is double the size of box, we used * (multiply) operator to double its dimensions. If you change $dimension value from 50px to 40px, the hollowbox will still remain double the size of box. Such a useful feature, isn’t it?

Here, if you are thinking, that multiplication will make processing of your site slower, that’s not the case here, because browser will always process the CSS file once compiled from SASS file.

Here are the other features that you can learn and use to make your development more productive and DRY.

Here is another thing, I want to introduce is COMPASS. Compass is SASS framework which makes writing stylesheets powerful and easy.

If you like it, and want to start developing, here is the Getting started  article of SASS and COMPASS.

Happy Coding 🙂

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s