SASS vs SCSS syntax difference - When to Use Which

The Big Idea

Discover how a small syntax change can make styling your website feel like magic!

The Scenario

Imagine you are writing styles for a website. You want to organize colors, fonts, and layouts neatly. You try to write everything in plain CSS, but it gets long and repetitive.

The Problem

Writing plain CSS means repeating the same code again and again. It's easy to make mistakes, and changing one color means hunting through many lines. Also, CSS syntax can feel strict and bulky.

The Solution

SASS and SCSS let you write styles more simply and clearly. They add shortcuts like variables and nesting. SCSS looks like CSS but with extra powers, while SASS uses a cleaner, indentation-based style. Both save time and reduce errors.

Before vs After

✗ Before

body {
  color: black;
  font-size: 16px;
}

h1 {
  color: black;
  font-size: 32px;
}

✓ After

$text-color: black

body
  color: $text-color
  font-size: 16px

h1
  color: $text-color
  font-size: 32px

What It Enables

Using SASS or SCSS makes your styles easier to write, read, and update, helping you build beautiful websites faster.

Real Life Example

A designer changes the brand color. Instead of editing dozens of CSS lines, you update one variable in SASS or SCSS, and the whole site updates instantly.

Key Takeaways

SASS and SCSS simplify writing CSS with variables and nesting.

SASS uses indentation, SCSS uses braces and semicolons like CSS.

Both help you write cleaner, faster, and easier-to-maintain styles.

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