SASS vs SCSS | What's the difference?

If you're into web development, you've most likely heard of both SASS and SCSS. But what exactly difference between them? This article will break it down for you.

What's the difference between SASS and SCSS?

SASS and SCSS are two syntaxes of the same scripting language that compile into CSS. Both offers the same features—such as variables, nesting, functions, and more—that extends the capabilities of standard CSS.

Here are the differences between SASS and SCSS:

Syntax

While, SASS, or Syntactically Awesome Style Sheets, is the original syntax that uses indentation to define code blocks, with no need for curly braces or semicolons.

// Sass example
body
  font-family Helvetica, sans-serif
  font-size 16px

.container
  width 100%
  margin-top 20px
  margin-bottom 20px

SCSS, or Sassy CSS looks more like traditional CSS and uses curly braces and semicolons to define blocks of code.

// SCSS example
body {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.container {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

File Extensions

The other difference between them is their file extensions. SASS files use the .sass extension, while SCSS files use the .scss extension. It's a small thing, but it helps you know which one you're dealing with at a glance.

Community Preference

When it comes to compatibility and community preference, SCSS is one step ahead. SCSS is more widely adopted and has become the de facto syntax for SASS. Because every valid CSS code is also valid SCSS code. Additionally, if you have an existing CSS codebase, transitioning to SCSS is often easier, as it closely resembles CSS.

Which to Use

This is entirely up to you and your project team as there is no difference in functionality between the two.

However, if you're an absolute beginner, remember that CSS is the only style language that browsers understand. So, it's strongly recommended that you learn CSS before learning SCSS or SASS.

Conclusion

In conclusion, the main difference between SASS and SCSS is their syntax. SASS has a unique indentation style; SCSS, on the other hand, has a syntax closer to CSS with the use of curly braces and semicolons.

Thank you for reading.