CSS PreProcessor

#sass #less #css

What is CSS PreProcessor?

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.

LESS VS SASS

LESS and Sass share a lot of similarities in syntax, including the following:

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

For More Info... check
Less Docs
SASS Docs

SASS

Installation
Depend on the operating system You use
Install/SASS

PROS

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


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

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.

LESS

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.


 @color: #4D926F;
 #footer {
   color: @color;
 }
 h2,
 h1 { 
   color: @color;
 }

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

Your Feedback Appreciated.