DEV Community

Cover image for CSS PreProcessor
Doaa Shafik
Doaa Shafik

Posted on

CSS PreProcessor

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 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


Depend on the operating system You use


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


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

2- There is many unnecessary characters when using the SCSS syntax.



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


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;
 h1 { 
   color: @color;

2- Less has detailed and well-organized documentation


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.

Top comments (2)

nadayousry profile image

Really great article πŸ‘πŸ‘

doaashafik profile image
Doaa Shafik

Thank you, Nada β™₯