CSS preprocessors less and sass

Posted By :Nikita Agarwal |21st February 2019

There are three css preprocessors i.e LESS , Sass and Stylus.

What is a preprocessor:

Sometimes writing css becomess tedious and repetition of styles which may consume time.So css preprocessors which is a scripting language that extends css.Preprocessors are not directly accessed by the browsers, first they are transpile into css .So basically if you use Less or Sass then slso you have to go through the old css.These preprocessors makes the designing bit easy than before,as the concept relates with the object oriented paradigm.

Advantages of using css preprocessors:

The Major advantage is non-repeating code which makes our css "Dry"

1.Reusable variables make code cleaner.
2.Easier to maintain and understand code snippets for further development.
3.Organized code easy to setup.
4.Use of calcullations and logics.

How to convert .sass file into .css file via command line

Suppose if we have a file names example.sass then run the command

sass example.sass:example.css

SASS VS LESS:

Both are the css powerfull extensions, use of which makes css more powerful,maintainable,themable and extendable.

1.Sass is in Ruby while less in javascript:

Sass is based on RUby which requires a ruby installation.The installation of sass is easy in Mac but bit tedious in WIndows.Less was also built in Ruby but ported to javascript,if you want to use less you can upload the necessary javasript files to the server or can use a offline transpiler.

2.Sass uses "$" while less uses "@" for declaring variables.

3.Sass has compass whereas less have preboot:

Both less and sass use mixins (the ability to use the same code throughout like functions),both have the extensions to integrate these mixins.Sass have compass for every support and updated available for future whereas less have preboot.less LESS mixins,the less softwareis very much fragmented than sass,which provides lots of different options for extensions which do not works in the same way.There must be a same way of working of the extensions which is provided by sass.

4.Better error messages of less:

Less have better error detection and the abillity to report the errors.

What is .scss and .sass:

Sass have two extensions .scss and .sass.Our .css file can be easily converted using these extensions.
The most commonly used syntax is .scss nowdays i.e SASSY CSS which is a superset of CSS3 .
Previosly .scss syntax was used , the difference lies is that insted of using brackets and semicolons uses indentation of lines for specifying blocks.

SCSS:

2.SASS:

What are Mixins:
Mixins are the stylesheets that allow us to define styles that can be re-used throughout.Mixins allows to write cleaner code.

Some examples of mixins are illustrated below:

1.Clearfixin:

This mixin is used when dealing with floats.It breaks float rule which is apllied currently and returns to the normal flow of the page.This happens when we need to float an element inside of the page.

2.Transitions:

Transitions are used to apply animation to extend the visual interaction with the users.Like hovering on an element and adding some animation on hover or the fill effect on buttons etc.

2.1Mixin code for transition

2.2 How to use in saas

3.Heading Mixins:
We can easily update all the headings with a quick update in one section.

3.1Mixin code for heading

3.2 Applying the mixin in saas

We can also create our own mixins with the use of @mixin directive and give this a name.We can also pass parameters to the mixin.After creating the mixin we can use the mixin in our css with @include.

Variables in Sass:

Declaring variables is same as in other programming languages,these variables needs to be decllared once and can be used throughout the stylesheet.We can declare fonts , headings, colors, font-size etc using variables .

Nesting in saas:

We can use nesting in saas which follow the same pattern as of our html.In css we need to declare separately the classes and the styels for particular element here in ths we can follow the hierarchy and define the styles.