CSS PreProcessor 
Tags: sass, less, css
Published: 2021-02-19 21:06:55

<h3>What is CSS PreProcessor? </h3>
A CSS preprocessor is a language extension for CSS. 
it adds some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. it helps keep large stylesheets well-organized and makes it easy to share designs within and across projects.

There are different types of CSS preprocessors, `Stylus, SASS, LESS`.
We will discuss SASS, LESS and make a comparison between them.

<h3>LESS VS SASS</h3>
LESS and Sass share a lot of similarities in syntax, including the following:

Mixins: <strong>"mix-in" properties from existing styles</strong>
Variables: <strong>Shared code between styles</strong>
Parametric mixins: <strong>Classes to which you can pass parameters, like functions</strong>
Nested Rules: <strong>Classes within classes, which cut down on repetitive code</strong>
Operations: <strong>arithmetic operations within CSS</strong>
Color functions: <strong>Edit your colors</strong>
Namespaces: <strong>Groups of styles that can be called by references</strong>
Scope: <strong>Make local changes to styles</strong>
JavaScript evaluation: <strong>JavaScript expressions evaluated in CSS</strong>

For More Info... check 
[Less Docs](http://lesscss.org/usage/)
[SASS Docs](https://sass-lang.com/documentation)
<br>
<h3>SASS</h3>
`Installation`
 Depend on the operating system You use
 [Install/SASS](https://sass-lang.com/install)

`PROS`

1- You are able to declare functions with Sass as regular functions

<pre>
<code>
 @function invert($color, $amount: 100%) {
   $inverse: change-color($color, $hue: hue($color) + 180);
   @return mix($inverse, $color, $amount);
 }
</code>
</pre>

2- Sass simplifies minifying CSS files by offering a one-line command that will output a minified version
`sass input.scss:output.css --style compressed`

3- Rather than being limited to editing the outputted CSS file in dev tools, with source maps you are able to manipulate the original .scss file
To enable source map
`sass style.scss:style.css --sourcemap`

`CONS`

1- To compile Sass, it needs either Ruby or libSass installed locally.

2- There is many unnecessary characters when using the SCSS syntax.
<br>
<h3>LESS</h3>

`Installation`

Less is written in JavaScript so you will need Node.
1- On Linux and Mac, 
   Then Install `npm install -g less`
   To Compile it `lessc styles.less styles.css`

2- On Windows, you will need to install the NodeJS installer.
   Then Install `npm install less`
   To Compile it `lessc styles.less styles.css`

`PROS`

1- The LESS syntax is essentially the same as CSS with extensions for dynamic behavior such as variables, mixins, operations, and functions.

<pre>
<code>
 @color: #4D926F;
 #footer {
   color: @color;
 }
 h2,
 h1 { 
   color: @color;
 }
<code/>
</pre>

2- Less has detailed and well-organized documentation

`CONS`

1- The '@' symbol is used with Less to declare variables. 
However '@' already has meaning in CSS, as it is used to declare @media queries and @keyframes. This can result in some confusion when reading the code

2- Less currently has limited support of conditionals such as ternary operators

3- Less does not offer custom functions like `SASS` and instead requires the use of [Mixins](http://lesscss.org/features/#mixins-feature)

Your Feedback Appreciated.