0
0
SASSmarkup~5 mins

SASS vs SCSS syntax difference

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

SASS and SCSS are two ways to write styles with the same power but different looks. Knowing their difference helps you choose the style you like.

When you want simpler, cleaner style code without many symbols.
When you prefer CSS-like syntax with braces and semicolons.
When working on a team that uses one style consistently.
When learning SASS and want to understand both writing styles.
When converting old SASS code to SCSS or vice versa.
Syntax
SASS
/* SASS syntax example */
body
  background: white
  color: black

/* SCSS syntax example */
body {
  background: white;
  color: black;
}

SASS uses indentation instead of braces and no semicolons.

SCSS looks like regular CSS but adds extra features.

Examples
This shows nested rules using indentation only.
SASS
/* SASS syntax */
nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
This shows the same nested rules but with braces and semicolons.
SASS
/* SCSS syntax */
nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
}
SASS uses indentation and no braces for variables and mixins.
SASS
/* SASS variable and mixin */
$color: blue

=button-style
  background: $color
  border: none

button
  +button-style
SCSS uses braces and semicolons for variables and mixins.
SASS
/* SCSS variable and mixin */
$color: blue;

@mixin button-style {
  background: $color;
  border: none;
}

button {
  @include button-style;
}
Sample Program

This example shows a simple box styled with SCSS syntax compiled to CSS. The box has a light blue background, some padding, and rounded corners.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SASS vs SCSS Example</title>
  <style>
    /* SCSS style compiled to CSS */
    .box {
      background-color: lightblue;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="box">This box is styled with SCSS syntax compiled CSS.</div>
</body>
</html>
OutputSuccess
Important Notes

SASS syntax is older and uses indentation like Python.

SCSS syntax is newer and looks like normal CSS, so easier to learn for CSS users.

Both compile to the same CSS, so you can choose the style you prefer.

Summary

SASS uses indentation and no braces or semicolons.

SCSS uses braces and semicolons like CSS.

Both do the same job but look different.