Introduction to CSS Preprocessors

Who Am I ?

Senior JavaScript Developer @ Recurship

Open source Contributor (Moment.js, Angular-CLI, etc)

Tech & Motivational speaker

Self made

BSCS from FAST-NU, Karachi

Fully Funded ICT Scholarship award holder

More about me:

Website | GitHub | LinkedIn | Medium | Twitter | Facebook | Stack Overflow | YouTube

What is a CSS Preprocessor?

Pre-processors extend CSS with variables, operators, interpolations, functions, mixins, nesting selectors and many more other usable assets.

These features make the CSS structure more readable and easier to maintain.

Why Preprocessing CSS?

  • In CSS - Building a function, reusing a definition or inheritance are hard to achieve.
  • For bigger projects, or complex systems, maintenance is a very big problem
  • Code repetitions everywhere in CSS is also a big problem.

  • Pre-processors, with their advanced features, helps to achieve writing reusable, maintainable and extensible codes in CSS.
  • By using a pre-processor, we can easily increase our productivity, and decrease the amount of code we are writing in a project.

(continued...) Benefits of using Preprocessors

  • It brings peace of mind and ease of use to the coder’s table
  • It lets us write code that is both future-ready and easily maintainable, thereby saving both our time and energy.
  • Provides us variety of features to write CSS like Variables, colors operations, math operations, imports, extends, mixins, if-else, loops, nestings, etc.
  • It allows us to re-use code instead of repeating it everywhere.

Common features a Preprocessor have:

  • Addition, subtraction, multiplication, and division. Writing out math problems makes code easier to maintain in the future and helps avoid scary “magic numbers” that get pasted in without explanation.
  • Variables. An example would be setting a color variable in one place and then referencing it multiple times throughout a style sheet.
  • Functions. For example, the built-in percentage() function that turns any number into a percentage value in CSS.
  • If/else conditionals. Conditionals are useful for toggling CSS throughout a style sheet or even switching between an entire light or dark theme.
  • Loops. Loops help avoid repetitive code when writing things like grids or creating individual classes for a bunch of different colors.

List of CSS Preprocessors exist...






Stars / Forks ?

10k+ / 1k+

15k+ / 3k+

8k+ / 1k+

16k+ / 900+

Released ?

~ 12 years ago

~ 8 years ago

~ 7 years ago

~ 4 years ago



Apache 2.0



CSS like syntax





File extension

.sass / .scss




Variables (declaration starts prefix / assigned) with

$ / :

@ / :

None / =

YES (Plugins are available for-example)

Features (Variables, Mixins, Nestings, Extends, Imports, Color ops, If / Else, Loops, Math, etc)





PostCss Plugins:

Few code snippets

SASS vs LESS vs Stylus vs CSS






Color operations

If-else statements / conditionals


Math operations


About CSS imports:

Final words …

CSS preprocessors are tremendously useful, they only make it easier to write CSS — they don’t come with their own styles.

That’s why CSS frameworks exist.

FYI: We’ll also have a dev-session on Intro to CSS frameworks in coming weeks or so..

References & Resources:

Questions ???

Thank You

Introduction to CSS Preprocessors - Google Slides