Full stack Web Development

CSS Preprocessors – Sass vs LESS

What Are CSS Preprocessors?

CSS preprocessors take code written in the preprocessed language and then it converts that code into the same old CSS. The popular CSS preprocessors are Sass, LESS, and Stylus.

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. In this blog, we will be looking into SASS and LESS

Why Use a CSS Preprocessor?

The main advantage of using this CSS Preprocessor is that they are not bound by any limitations of CSS. CSS works well but it doesn’t always allow us to do everything we would like to do. The preprocessors offer us to use variables in our coding. In current 2017 according to an industry survey, SASS is used more as compared to LESS.

Syntax

The most important part of writing code in a CSS preprocessor is understanding the syntax. The syntax is identical to regular CSS for all three preprocessors.

Variables

Variables in Sass and Less can be declared and used throughout the stylesheet. They can be assigned any value and can be referenced anywhere throughout the stylesheet. Let us look into how to declare variables in Sass. In Sass, variables are prepended with ‘$’ symbol and value and name is separated with a semicolon.

For example,

$divColor: #e2e2e2;
$borderStyle: dotted;
div {
color: $divColor;
border: 1px $borderStyle $divColor;
}

Now for a declaration of variables in LESS, they are almost same as Sass variables, except the variables are prepended with a ‘@’ symbol. For example,

@divColor: #e2e2e2;
@borderStyle: dotted;
div {
color: @divColor;
border: 1px @borderStyle $divColor;
}

Now let us look into difference between Interpolation in Sass and Less

What is Interpolation?

Interpolation: expands on variables in that you aren’t limited to the values of CSS properties.

Interpolation in Sass

$side: bottom;
border-#{$side): 1px solid #000;
The resulting CSS will be
border-bottom: 1px solid #000;

Interpolation in Less

@base-url: “www.acadgild.com”;

background-image: url(“@{base-url}}/images/image.png”);

The resulting CSS will be

background-image: url(“http://www.acadgild.com/images/image.png”);

Operations

We can even perform operations in Sass and Less if we require some proportions over fixed measurements.

Operations in Sass

$div-width: 500px;

$items: 5;

#navbar li {width: $div-width/$items – 10px;} /* — resulting css — */

#div li {width: 150px;}

Similar thing can be done in Less

/* — .less — */

@div-color: #111;

#div1 {color: @div-color * 3;} /* — resulting css — */

#div1 {color: #333;}

Nesting

The most interesting work that can be done in Sass and Less is nesting

Now let us look into an example of nesting list items

Notice how the list, list items, and link are nested within #navbar.

 

/* -- .scss or .less -- */
#navbar {
width: 80%;
height: 25px;
ul { list-style: none; }
li {
float: right;
span { font-size: 16px }
}
}
/* -- resulting css -- */
#navbar {width: 80%; height: 25px;}
#navbar ul {list-style: none;}
#navbar li {float: right;}
#navbar li span { font-size: 16px }

Mixins

By using Mixins we can reuse the code whenever required. Rather than having to go throughout our stylesheet and change a property multiple times, we can now just change it inside our Mixin.

 

/* -- .scss -- */
@mixin rounded-corners {
$radius: 5px;
border-radius: $radius;
}
#navbar li { @include rounded-corners; }
/* -- .less -- */
.rounded-corners {
border-radius: @radius;
}
#header {.rounded-corners;}
#footer { .rounded-corners;}
/* -- resulting css -- */
#header {
border-radius: 5px;
}
#footer {
border-radius: 5px;
}

Before we conclude let’s take a demonstration for using SASS

SOME PREREQUESTIC IS YOU NEED TO INSTALL SASS AND THEN FOLLOW THE STEPS. More information on installation click to this link http://sass-lang.com/install

  1. Create a project folder and create two files as index.html and style.scss. Yes, Scss you need to create.
  2.  Create a partial file as _variable.scss and will add it to style.scss.  using @import ‘_variable.scss’ ;
  3. Please find the Github link https://github.com/Soumyajeetbai/SASS so that you can inspect and get started.

For compiling your code, please write down this command in the command line.

sass –watch style.scss:style.css .

you have to go the present directory of the file from your system. and then write down this command which you make our entire folder into a watchify mode that means if you do any change in the file we won’t be compiling, again and again, to convert your Sass file into CSS file.

Simply use the command sass –watch <input folder>:<output folder>, like this:$ ls -l

css/ sass/

$ sass –watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.

There are many concepts which you can gradually learn to you start learning SASS closely. This blog is intended to promote new technologies in Front end web development.  If you want to learn any front end technologies. Please fill free to visit our https://acadgild.com/  and enjoy the free resources.

Conclusion:

These are different ways of writing CSS using CSS preprocessor. CSS preprocessor is a way to provide functionality in the form of abstraction like Variables, Mixins, and also provide nesting of CSS.

The CSS Preprocessor provide us extra things which cannot be done alone with CSS.

I hope you have understood the main differences between LESS and SASS. Although by the above code example you might have come to know that they are not so difficult when it comes to syntax. I think by now you might have chosen your CSS preprocessor which you would go with. If you have any other query you can write us at [email protected]

Keep visiting our site www.acadgild.com for more updates on Front End and other technologies.NodeJS course details

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Related Articles

Close
Close