SASS vs SCSS syntax difference

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>

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.

Practice

1. Which of the following best describes the main difference between SASS and SCSS syntax?

easy

A. SCSS uses indentation only; SASS uses braces and semicolons.

B. SASS requires semicolons; SCSS does not use semicolons or braces.

C. SASS uses indentation without braces or semicolons; SCSS uses braces and semicolons like CSS.

D. SASS and SCSS have identical syntax and formatting rules.

Solution

1. Step 1: Understand SASS syntax style

   SASS syntax relies on indentation to separate blocks and does not use braces or semicolons.

2. Step 2: Understand SCSS syntax style

   SCSS syntax is similar to CSS, using braces to group blocks and semicolons to end statements.

3. Final Answer:

   SASS uses indentation without braces or semicolons; SCSS uses braces and semicolons like CSS. -> Option C

4. Quick Check:

   SASS indentation vs SCSS braces = D [OK]

Hint: Remember: SASS is indentation-based, SCSS looks like CSS [OK]

Common Mistakes:

• Confusing which syntax uses braces
• Thinking both use semicolons the same way
• Assuming SASS and SCSS are identical

2. Which of the following is a correct SCSS syntax for a simple style rule?

easy

A. body: { color blue }

B. body { color: blue; }

C. body
color: blue

D. body { color blue }

Solution

1. Step 1: Identify SCSS syntax rules

   SCSS uses braces to group declarations and semicolons to end each property line, just like CSS.

2. Step 2: Check each option

   body { color: blue; } uses braces and semicolon correctly. Options A, B, and D miss semicolons or use wrong punctuation.

3. Final Answer:

   body { color: blue; } -> Option B

4. Quick Check:

   SCSS = braces + semicolons [OK]

Hint: SCSS looks like CSS: braces and semicolons [OK]

Common Mistakes:

• Omitting semicolons in SCSS
• Using indentation-only style in SCSS
• Misplacing colons or braces

3. Given the following SASS code, what CSS will it compile to?

nav
  ul
    margin: 0
    padding: 0
  li
    list-style: none

medium

A. nav ul li { margin: 0; padding: 0; list-style: none; }

B. nav { ul { margin: 0; padding: 0; } li { list-style: none; } }

C. nav ul { margin: 0 padding: 0 } nav li { list-style none }

D. nav ul { margin: 0; padding: 0; } nav li { list-style: none; }

Solution

1. Step 1: Understand SASS nesting

   In SASS, indentation shows nesting. "ul" and "li" are nested inside "nav" but are siblings, not nested inside each other.

2. Step 2: Translate nesting to CSS selectors

   "nav ul" and "nav li" become separate selectors with their own properties.

3. Final Answer:

   nav ul { margin: 0; padding: 0; } nav li { list-style: none; } -> Option D

4. Quick Check:

   SASS indentation nesting = separate CSS selectors [OK]

Hint: Indentation means nesting, siblings become separate selectors [OK]

Common Mistakes:

• Combining ul and li styles incorrectly
• Missing semicolons in output
• Confusing nesting levels

4. Identify the error in this SCSS code snippet:

.container {
  width: 100%
  height: 50px;
}

medium

A. Missing semicolon after width property

B. Incorrect use of braces

C. Indentation error

D. Property name misspelled

Solution

1. Step 1: Check SCSS property syntax

   Each property must end with a semicolon in SCSS.

2. Step 2: Locate missing semicolon

   The width property line ends without a semicolon, causing a syntax error.

3. Final Answer:

   Missing semicolon after width property -> Option A

4. Quick Check:

   SCSS requires semicolons after properties [OK]

Hint: Every SCSS property line needs a semicolon [OK]

Common Mistakes:

• Forgetting semicolons in SCSS
• Assuming indentation fixes missing semicolons
• Confusing SCSS with SASS syntax

5. You want to convert this SCSS code to SASS syntax:

.card {
  padding: 1rem;
  border: 1px solid black;
  .title {
    font-weight: bold;
  }
}

Which is the correct SASS equivalent?

hard

A. .card
padding: 1rem
border: 1px solid black
.title
font-weight: bold

B. .card {
padding: 1rem;
border: 1px solid black;
.title {
font-weight: bold;
}
}

C. .card
padding: 1rem;
border: 1px solid black;
.title
font-weight: bold;

D. .card {
padding: 1rem
border: 1px solid black
.title {
font-weight: bold
}
}

Solution

1. Step 1: Remove braces and semicolons for SASS

   SASS syntax uses indentation only, no braces or semicolons.

2. Step 2: Apply correct indentation

   Properties and nested selectors are indented properly under their parent selectors.

3. Final Answer:

   .card padding: 1rem border: 1px solid black .title font-weight: bold -> Option A

4. Quick Check:

   SASS = indentation, no braces or semicolons [OK]

Hint: Drop braces and semicolons, use indentation for nesting [OK]

Common Mistakes:

• Leaving braces or semicolons in SASS
• Incorrect indentation levels
• Mixing SCSS and SASS syntax