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

Need a 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

Need a 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;
}

Need a 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
}

Need a hint?

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