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

Index

SASS

LESS

Stylus

PostCSS

Stars / Forks ?

10k+ / 1k+

15k+ / 3k+

8k+ / 1k+

16k+ / 900+

Released ?

~ 12 years ago

~ 8 years ago

~ 7 years ago

~ 4 years ago

License

MIT

Apache 2.0

MIT

MIT

CSS like syntax

YES

YES

YES

YES

File extension

.sass / .scss

.less

.styl

.css

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)

YES

YES

Yes

YES

PostCss Plugins: https://www.postcss.parts/

Few code snippets

SASS vs LESS vs Stylus vs CSS

Reference: https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus

Variables

Nesting

Mixins

Extends

Color operations

If-else statements / conditionals

Loops

Math operations

Imports

About CSS imports: https://developer.mozilla.org/en-US/docs/Web/CSS/%40import

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