LESS vs SASS Quick Tutorial in a article

First of all, if you're going to learn a new web technology and thinking about difficulties so you have to first make up your mind to erase all your negative thoughts because learning is easy if you eager to learn. Anyways as per the title of post let's start:

LESS vs SASS Quick Tutorial

If you don't have an understanding about LESS and SASS then focus on this article I will share every important point especially for beginners. You have to just concentrate on your reading.

LESS and CSS both are a CSS Preprocessor, a scripting language extends CSS into variable and compiles as normal CSS. The overall reason behind LESS and SASS is to save developers time to write lot's of styling tags and HEX color values. Saving developers time and minimize the number of lines for repeated styling content.

SASS vs LESS complete tutorial

LESS vs SASS?

Don't go through the name may be it looks like same but they have lot's of differences as below:

1- LESS is JavaScript based preprocess and Sass is Ruby based

2- They have different extension .less and .scss

3- In SASS you can use  Compass and for LESS use mixin libraries like battling to be the best.

4- Installation for LESS is quite easy in compare to SASS because it has only JS dependencies.

5- SASS trends to more logical and functional area with more usable components pattern.

If you are new for both of preprocessor's CSS then I suggest you to start with SASS, in the installation SASS may become trouble for you but once you were done, you must love to code in SASS.

 

How to Install SASS using Command Line ?

If you are Windows user first you need to Install Ruby on your system, download Ruby from Here !

Now open your terminal and type below command:

Choose your drive location:

cd c:

now use below command:

sudo gem install sass

How to Install LESS using Command Line ?

Same as above for LESS you have to install Node Js first, install from Here !

Now you have to run below command:

npm install less

Example for SASS and LESS:

SASS:

$font-face: Segoe UI, sans-serif;
$main-color: #000;

body {
 font: 100% $font-face;
 color: $main-color;
}

$font-face and $main-color are two variable here, we have to define property once and after that, we can reuse.

Extend: Most powerful feature in SASS and LESS, you can reuse class components in SASS using @extend keyword.

.msg {
 border: 1px solid #00;
 color: #333
}

.scs {
 @extend .msg;
 border-color: red;
}

LESS:

@font-face: Segoe UI, sans-serif;
@main-color: #000;

body {
 font: 100% @font-face;
 color: @main-color;
}

@font-face and @main-color , there are two variable with @ selector.

Extend: As above you can use extend in LESS using :extend keywords.

.msg {
 border: 1px solid #00;
 color: #333
}

.scs {
 &:extend(.msg);
 border-color: red;
}

For more, you can check this link : Here !

I wrote this article to clear basic phenomena for LESS and SASS, if it's interesting for you, you should follow their official documentation.

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page