What is Sass and Why Should You Start Using it Immediately

AD

Sass is a CSS preprocessor. A preprocessor converts one form of data into another. So a CSS preprocessor will help you write code more efficiently, and quickly; then it will process into CSS. Confused? Don’t be, just carry on.

Let’s take an example. Let’s say you like a particular color, or you have favorite font family that you use in every second project that you do. Now you have to define that font family each time for every single CSS file, right? You have to type down the font names and other attributes.

If you do the same thing with a preprocessor, you can just make a variable of that font family and call it anything, let’s say: “favFonts”. The preprocessor will write down the whole CSS code when the final CSS file is being generated.

Still not clear? Again, don’t worry, just carry on.

Variables

Let’s start from variables because we already have this topic in discussion. Let’s say you are using two font families in a website. And you have to recall that font family each time and then you fine tune it according to your needs. It’s time consuming, alright.

With Sass, you can convert it into variables. Here’s an example:

$my-fonts: "Open Sans", Verdana, sans-serif;

You can render it:

a {
font-family: $my-fonts;
}

You can also mix properties, like this:

$my-fonts: "Open Sans", Verdana, sans-serif;
$my-color: #fc3;

Now you can combine them:

.my-selector { font-family: $my-fonts; color: $my-color; }

Now I’ll leave it on your imagination to see how easy it becomes when you get your hands running on Sass.

Scaling

Sass really stands heads and shoulders above the rest when it comes to large scale websites, the ones which contain thousands of pages.

David Simpson, a developer at HubSpot, shared his experience of using Sass:

At a high level, each of the file that we commit to GitHub, automatically gets queued in Jenkins, hence it is compiled and programmed to Amazon S3. This is the flexibility to launch new code at moment’s notice. Meanwhile we QA test and assure that it’s not breaking anything.

Speed & Organization

Even though these two points are two separate in their spheres, I’m combining them into one because they both help to increase speed. And you do know how important speed is, don’t you.

Imports

CSS already has import feature, but it’s not that great. The default CSS import starts a waterfall effect, loading all files at once, slowing down server. Another way of looking at it is that CSS import creates a separate HTTP request for each @import.

Sass is a preprocessor so it loads the imported file before loading the page. It works on a single request to the server. The Sass file imports everything, turns it into CSS on runtime and delivers to the client browser.

Commenting

Commenting is a noble thing when it comes to CSS. It saves yours and others headache. But of course, all those comments take up important kilobytes and slow down the loading speed. Sass has a solution for that as well.

You write all your comments in the .scss file which is rendered and converted into valid CSS file on runtime. But the CSS file generated will NOT contain any comments. So you can write as long comments you want but you will not be compromising a single byte. Only minified CSS is loaded.

Mixins

Mixins are groups of CSS declarations that can be recalled anywhere. For instance you can create a button, or a banner or anything that you have to recall again and again. You won’t have to write down the whole CSS code each time, you can just call that mixin and everything will be taken care of.

Let’s create a button:

@mixin button-sizing($b-size) {
-webkit-box-sizing: $b-size;
-moz-box-sizing: $b-size;
box-sizing: $b-ize;
}

And now we can use this mixin by:

.my-selector {
@include button-sizing(border-box);
}

@extend

You can also add, or should I say, extend properties. For instance, you have multiple buttons but one button has to stand out. For instance, buy now button needs to stand out. So while all the buttons will contain the same properties, it is likely that you’ll give the buy button some additional outline or something. For that, you can extend the properties of that particular button.

Extensions

Sass is mighty powerful already, but there are also extensions (don’t confuse with @extend) that make it more and more powerful.

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved