SASS vs. SCSS

If you've heard of Sass and SCSS for styling web pages and are curious about their differences, this article will cover them for you. Let's get started.

SASS vs. SCSS

SASS and SCSS tools are actually two different syntaxes of the same scripting language that are compiled into Cascading Style Sheets (CSS). Both SASS and SCSS offer features that are not available in plain CSS, such as nesting, variables, functions, and more.

First, SASS, or Syntactically Awesome Stylesheets is the original syntax using indentations to define blocks of code. In this syntax, no curly braces and semicolons needed.

Here is an example:

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

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

On the other hand, SCSS, or Sassy CSS looks more like traditional CSS. It uses curly braces and semicolons to define blocks of code. Therefore, each CSS code is also SCSS code.

Here is an example:

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

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

The anohter difference between them is their file extensions. SASS files uses 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.

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.

However, if you are absolute beginner, remember that CSS is the only style language that browsers understand, so it is 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.

Lastly, keep in mind SASS or SCSS is not alternative to CSS, so it is important to learn CSS before diving into these different syntax of same scripting lanaguage.

Thank you for reading.