SASS vs SCSS syntax difference - Hands-On Comparison

Understanding SASS vs SCSS Syntax Difference

📖 Scenario: You are working on a website style sheet. You want to learn how to write styles using two different but related ways: SASS syntax and SCSS syntax. Both help you write CSS faster and cleaner, but they look a bit different.

🎯 Goal: Create two style blocks: one using SASS syntax and one using SCSS syntax. See how they look and understand the difference in writing style.

📋 What You'll Learn

Create a SASS style block for a .box class with a background color and padding using indentation only.

Create an SCSS style block for a .container class with a border and margin using braces and semicolons.

Use variables in both SASS and SCSS blocks for colors.

Write valid SASS and SCSS code that compiles to CSS.

💡 Why This Matters

🌍 Real World

Web developers often use SASS or SCSS to write styles faster and keep code organized.

💼 Career

Knowing both SASS and SCSS syntax helps you work on projects that use different style preprocessors and collaborate with teams.

1

Create a SASS variable and style block

Create a SASS variable called $primary-color and set it to #3498db. Then write a style block for the class .box using SASS syntax (no braces, use indentation) that sets background-color to $primary-color and padding to 1.5rem.

SASS

# Create a SASS variable $primary-color and a .box style block using indentation
# Your code here

Hint

Remember, SASS syntax uses indentation instead of braces and no semicolons.

2

Create an SCSS variable and style block

Create an SCSS variable called $border-color and set it to #2ecc71. Then write a style block for the class .container using SCSS syntax (use braces and semicolons) that sets border to 2px solid $border-color and margin to 2rem.

SASS

$primary-color: #3498db

.box
  background-color: $primary-color
  padding: 1.5rem

// Create an SCSS variable $border-color and a .container style block using braces and semicolons
# Your code here

Hint

SCSS syntax looks like normal CSS but allows variables and needs braces and semicolons.

3

Add nested styles in SASS syntax

Inside the existing .box style block, add a nested style for p elements that sets color to white using SASS syntax indentation.

SASS

$primary-color: #3498db

.box
  background-color: $primary-color
  padding: 1.5rem
  # Add nested p style here

$border-color: #2ecc71;

.container {
  border: 2px solid $border-color;
  margin: 2rem;
}

Hint

In SASS syntax, nested styles are indented under the parent selector.

4

Add nested styles in SCSS syntax

Inside the existing .container style block, add a nested style for h1 elements that sets font-weight to bold using SCSS syntax braces and semicolons.

SASS

$primary-color: #3498db

.box
  background-color: $primary-color
  padding: 1.5rem
  p
    color: white

$border-color: #2ecc71;

.container {
  border: 2px solid $border-color;
  margin: 2rem;
  // Add nested h1 style here
}

Hint

In SCSS syntax, nested styles go inside braces within the parent block.

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