DEV Community

Cover image for Write Less and Deliver More: 3 CSS Preprocessors (Free and Powerful)
Werliton Silva
Werliton Silva

Posted on

Write Less and Deliver More: 3 CSS Preprocessors (Free and Powerful)

#css #webdev #programming #beginners

Imagine you're painting a wall. With traditional CSS, it's like using a fine brush: it works, but it's a lot of effort. Preprocessors are like paint sprayers — faster, less work, and a smoother finish.

Pistola

Have you ever found yourself copying and pasting the same styles in multiple places in your CSS? Or wished CSS had variables and functions like a real programming language?

That’s where CSS preprocessors like SASS, SCSS, and Stylus come in. They're like superpowers that extend CSS with features beyond what the browser understands natively.

What Are Preprocessors?

Preprocessors are tools that transform a language similar to CSS (but with extra features) into regular CSS that the browser understands.

They allow:

  • Variables
  • Functions
  • Loops
  • Conditionals
  • Imports between files
  • Code reuse with mixins

Imagine being able to write CSS as if you're actually programming, with logic, reuse, and structure.

SASS and SCSS: Two Styles, One Soul

sass

SASS stands for Syntactically Awesome Style Sheets. It comes in two formats:

  • .sass (indentation-based, no braces or semicolons)
  • .scss (similar to traditional CSS, uses braces and semicolons)

Comparison Example

Plain CSS 

/* Plain CSS */
h1, h2 {
 font-family: Arial, sans-serif;
}

h1 {
  color: #3498db;
}

h2, p {
  color: #ccc;
}
Enter fullscreen mode Exit fullscreen mode

SCSS 

// SCSS (uses {}, ;, and looks like CSS):
Enter fullscreen mode Exit fullscreen mode

The result:


// SASS (no {}, no ;, uses identation):
$cor-principal: #3498db
$fonte-padrao: Arial, sans-serif

h1, h2
  color: $cor-principal
  font-family: $fonte-padrao
Enter fullscreen mode Exit fullscreen mode

Both SCSS and SASS produce the same CSS in the end. The only difference is the syntax you prefer.

Reusability with Mixins

Imagine a standard button used throughout your site:

// SCSS
@mixin standard-button {
  padding: 10px 20px;
  border-radius: 8px;
  background: #2ecc71;
  color: white;
}

.login-button {
  @include standard-button;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
Enter fullscreen mode Exit fullscreen mode

This saves you from repeating the same properties over and over. And the best part? If you want to change the background of all buttons, just update the @mixin.

Logic with Style

Preprocessors let you use:

Conditionals (if/else) 

$dark-theme: true;

body {
  background: if($dark-theme, #000, #fff);
}
Enter fullscreen mode Exit fullscreen mode

Loops 

@for $i from 1 through 3 {
  .m-$i {
    margin: $i * 10px;
  }
}
Enter fullscreen mode Exit fullscreen mode

Generates: 

.m-1 { margin: 10px; }
.m-2 { margin: 20px; }
.m-3 { margin: 30px; }
Enter fullscreen mode Exit fullscreen mode

Other Useful Features

  • @import → imports another SCSS file
  • @extend → inherits styles from another selector 
// SCSS
%base-button {
  font-weight: bold;
}

.button {
  @extend %base-button;
  padding: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Stylus: CSS Freestyle

Stylus

Stylus is the most flexible of the three. You can use braces, semicolons... or not. Even the variable symbol is optional!

Example: 

// Stylus
primary = lightblue
.button
  font-size 16px
  color primary
Enter fullscreen mode Exit fullscreen mode

You can also create functions:

add(a, b)
  a + b

.container
  margin add(10px, 20px)
Enter fullscreen mode Exit fullscreen mode

This generates:

.container {
  margin: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Why Use Preprocessors?

  • Better code organization
  • Less repetition
  • Easier to maintain large projects
  • Helps enforce patterns and design systems

If you're learning CSS, mastering preprocessors will give you a big edge in the market.

Which One to Use?

Tool Syntax Learning Curve Popularity
SCSS Familiar (CSS) Low High
SASS Indented Medium Medium
Stylus Flexible Medium Medium

If you want an easy start: SCSS
If you like minimalism: SASS
If you want full freedom: Stylus

When Should You Use Them?

If you:

  • Work on large projects
  • Hate repeating code
  • Want to keep your CSS clean and organized
  • Care about productivity

Quick Challenge

Try converting this CSS into SCSS using variables and mixins and comments your answer:

.card {
  background: white;
  color: black;
  padding: 20px;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

CSS is good. But with preprocessors, you become a true style alchemist. More efficiency, better organization, and more freedom to create amazing interfaces.

Want to level up like a design ninja? Try SCSS or Stylus in your next project and feel the difference.

If you found this helpful, save this post and share it with a friend who’s still stuck with plain CSS.

Let’s master frontend with elegance and practicality. See you in the next post!

Top comments (3)

Collapse
 
michael_liang_0208 profile image
Michael Liang •

learned a lot!

Collapse
 
werliton profile image
Werliton Silva •

Nice, bro. I glad hear this.

Collapse
 
michael_liang_0208 profile image
Michael Liang •

Could you tell me your available time for chat? 😁