DEV Community

Cover image for Sass Tutorial: Why Smart Developers Don’t Write Raw CSS Anymore
Raj Aryan
Raj Aryan

Posted on

Sass Tutorial: Why Smart Developers Don’t Write Raw CSS Anymore

#webdev #tailwindcss #css #beginners

Let me take you back to a time when I was styling a large eCommerce site.

There were 15 shades of blue, used in 30 different components, and repeated font-size values scattered across 1000+ lines of CSS.

Updating a single color meant running a Find-and-Replace—and praying it didn’t break anything.

Then I discovered Sass.

And everything changed.

💡 What is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor—a tool that lets you write cleaner, faster, and smarter CSS with features like:

  • Variables
  • Nesting
  • Functions
  • Mixins
  • Inheritance

Once written, your .scss files get compiled into standard CSS.

🧪 Quick Sass Example 

$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
Enter fullscreen mode Exit fullscreen mode

This compiles to:

body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

🧠 Why This Matters:

If you ever need to change the background across multiple pages, just update $bgcolor once. No more global search-and-replace.

🧰 Sass Features You’ll Love

1. ✅ Variables 

$primary-color: #3498db;
$padding: 1rem;
Enter fullscreen mode Exit fullscreen mode

Use them like:

button {
  background: $primary-color;
  padding: $padding;
}
Enter fullscreen mode Exit fullscreen mode

2. 🧬 Nesting 

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

This compiles into clean, readable CSS with selector hierarchy.

3. ♻️ Mixins

Reusable chunks of styles:

@mixin rounded {
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card {
  @include rounded;
}
Enter fullscreen mode Exit fullscreen mode

4. 🎯 Functions

Sass comes with built-in functions, and you can create your own!

@function em($px) {
  @return $px / 16 * 1em;
}

p {
  font-size: em(24);
}
Enter fullscreen mode Exit fullscreen mode

📚 Explore Sass Functions

You can find complete references at W3Schools:

  • 🔤 String Functions: to-upper-case(), str-length()
  • 🔢 Numeric Functions: ceil(), floor(), round()
  • 🗂️ List Functions: length(), nth()
  • 🗺️ Map Functions: map-get(), map-merge()
  • 🎨 Color Functions: lighten(), darken(), mix()
  • 🧾 Selector Functions: selector-nest()
  • 🔎 Introspection Functions: type-of(), variable-exists()

🔄 Sass vs SCSS?

  • .sass → older syntax (indentation-based, no curly braces)
  • .scss → CSS-compatible syntax (uses curly braces)

Most modern projects use .scss.

⚙️ How to Set Up Sass Locally

  1. Install Sass CLI: 
   npm install -g sass
Enter fullscreen mode Exit fullscreen mode
  1. Compile SCSS to CSS: 
   sass input.scss output.css
Enter fullscreen mode Exit fullscreen mode
  1. Use the CSS in your project as usual.

You can also use tools like:

  • VSCode Extensions
  • Preprocessors in Webpack
  • Live Sass Compiler

💡 Real-World Use Case

In large design systems or component libraries, Sass:

  • Reduces duplication
  • Enforces consistency
  • Speeds up theme switching
  • Encourages reusable code via mixins and functions

🧠 Interview Questions

  1. What is Sass, and how does it improve CSS?
  2. What’s the difference between .sass and .scss?
  3. How do you define and use variables in Sass?
  4. What are mixins in Sass, and how do you use them?
  5. How would you create a function in Sass to convert px to rem?
  6. What are some useful built-in Sass functions?
  7. Explain how nesting works in Sass and how deep you should go.

🛒 Get Your Copy Now

I genuinely believe this book should be on every developer’s shelf.

👉 Buy it now on Amazon

It’s an affordable investment in your career that pays back in confidence, clarity, and clean code.

Top comments (0)