Onjsdev

Share


sass vs scss

SASS vs. SCSS: A Quick Guide


By onjsdev

Nov 14th, 2023

If you're interested in web development, you've probably heard of SASS and SCSS. These tools are actually two different syntaxes of the same scripting language that are interpreted or compiled into Cascading Style Sheets (CSS).

They make it easy for us to create CSS stylesheets by offering the same features that are not available in plain CSS, such as nesting, variables, functions, and more.

Now let's see the differences in their syntax, file extensions, community support and learning curves with examples.

Syntax

SASS stands for Syntactically Awesome Stylesheets. SASS is the original syntax, and it uses indentations to define blocks of code.

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

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

On the other hand, SCSS stands for Sassy CSS. SCSS looks more like traditional CSS. It uses curly braces and semicolons to define blocks of code.

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

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

File Extensions

When it comes to 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.

Compatibility

SCSS is more widely adopted and has become the de facto syntax for Sass. Becuase every CSS code is also SCSS code. Also if you have an existing CSS codebase, transitioning to SCSS is often easier, as it closely resembles CSS.

Learning

SASS requires a bit of adjustment due to its unique syntax. On the other hand in SCSS If you know CSS, you're already halfway there.

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.

Community

Each syntax has its fans, so there are enough resources for both syntaxes on the internet. If we have to compare these two syntaxes in terms of community size, we can say that SCSS is one step ahead of SASS due to its similarity to CSS.

Conclusion

As a result, SASS and SCSS are actually different syntaxes of the same scripting language. 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.