Learning CSS Preprocessors

CSS preprocessors have revolutionized the way we write and maintain our stylesheets. They introduce a range of features, such as variables, functions, and operations, making CSS more maintainable, themeable, and extendable. In this guide, we'll dive deep into three popular preprocessors: SASS, LESS, and Stylus.

Table of Contents

1. SASS: Syntactically Awesome Style Sheet
2. LESS: Learner Style Sheets
3. Stylus: The Best of Both Worlds
4. Conclusion
5. Resources & References

---

SASS: Syntactically Awesome Style Sheet

About SASS

Originating in 2006, SASS is considered the oldest CSS preprocessor. It was designed to introduce dynamic functionality to CSS.

Syntax

SASS provides two distinct syntaxes:

• SCSS (Sassy CSS): Uses the .scss file extension. This syntax resembles traditional CSS, allowing for braces and semicolons.

  $primary-color: seashell;
  $primary-bg: darkslategrey;
  
  body {
    color: $primary-color;
    background: $primary-bg;
  }

• Indented (or just "Sass"): Uses the .sass file extension. It's whitespace-sensitive and omits characters like semicolons.

  $primary-color: seashell
  $primary-bg: darkslategrey
  
  body
    color: $primary-color
    background: $primary-bg

Features

• Variables: Store reusable values.
• Mixins: Write reusable style snippets.
• Nesting: Nest selectors within selectors.
• Partials & Import: Modularize your CSS.
• Operators: Use mathematical operators right inside your styles.

Tools & Real-world Examples

Frameworks like Bootstrap and Zurb Foundation are grounded in SASS. Companies such as Airbnb and Hubspot also use SASS in their production sites.

---

LESS: Learner Style Sheets

About LESS

Inspired by SASS, LESS was introduced in 2009. It extends the capabilities of CSS and operates as a JavaScript library.

Syntax

LESS adopts standard CSS syntax and uses the .less extension.

@primary-color: seashell;
@primary-bg: darkslategrey;

body {
  color: @primary-color;
  background: @primary-bg;
}

---

Stylus: The Best of Both Worlds

Launched in 2010, Stylus combines the powerful features of both SASS and LESS. Written in NodeJS, it integrates easily with Node projects.

Stylus is known for its flexible syntax, allowing multiple writing styles.

primary-color = seashell
primary-bg = darkslategrey

body
  color primary-color
  background primary-bg

Features

• Transparent Mixins: Provide automatic vendor prefixes.
• Conditional Logic: Implement if/else conditions.
• Looping: Create styles that output for repetitive elements.