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.

* If this Helped you! Please take a Second to like and share it. *

Himanshu is young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too. Doing lot's of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


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