SASS vs SCSS syntax difference - Practice Questions

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct SCSS syntax for nesting

Which option shows the correct SCSS syntax to nest a p tag inside a div with a color of blue?

A

div {
  p {
    color: blue;
  }
}

B

div
  p
    color: blue

C

div {
  p: {
    color: blue;
  }
}

D

div
  p {
    color: blue
  }

💡 Hint

Remember SCSS uses braces and semicolons like CSS.

SCSS syntax uses braces {} and semicolons ; similar to CSS. Nesting is done inside braces. Option A correctly nests p inside div with proper braces and semicolons. Options A and B use indentation but mix SCSS and SASS styles incorrectly. Option A has a colon after p which is invalid.

📝 Syntax

intermediate

Identify the correct SASS syntax for variables

Which option shows the correct SASS syntax to define a variable $main-color with value #333 and use it for text color?

A

$main-color: #333;

body {
  color: $main-color;
}

B

$main-color: #333

body
  color: $main-color

C

$main-color = #333

body
  color: $main-color

D

$main-color: #333

body {
  color: $main-color
}

💡 Hint

SASS uses indentation and no semicolons or braces.

SASS syntax uses indentation and no braces or semicolons. Variables are defined with a colon and no semicolon. Option B correctly defines the variable and uses indentation for the body selector. Option B and D use braces and semicolons which is SCSS style. Option B uses = which is invalid.

❓ rendering

advanced

What color will the paragraph text be?

Given the following SCSS code, what color will the paragraph text inside section be when rendered in the browser?

SASS

section {
  color: red;
  p {
    color: green;
  }
}

A Green

B Red

C Black (default)

D Blue

💡 Hint

Nested selectors override parent styles for the same property.

The p inside section has its color set to green, which overrides the red color of the parent section. So the paragraph text will be green.

❓ selector

advanced

Which SASS syntax correctly nests a hover state?

Which option shows the correct SASS syntax to style a button with a blue background and change background to dark blue on hover?

A

button
  background: blue
  &:hover {
    background: darkblue
  }

B

button {
  background: blue;
  &:hover {
    background: darkblue;
  }
}

C

button
  background: blue
  &:hover
    background: darkblue

D

button {
  background: blue
  &:hover
    background: darkblue
}

💡 Hint

SASS uses indentation and no braces or semicolons.

Option C uses correct SASS syntax with indentation and no braces or semicolons. The hover state is nested with &:hover indented under button. Options B and D use braces which is SCSS style. Option C mixes indentation and braces incorrectly.

❓ accessibility

expert

Which SCSS snippet improves accessibility by using focus styles?

Which SCSS code snippet correctly adds a visible focus outline to links for keyboard users?

A

a {
  color: blue;
  &:active {
    outline: none;
  }
}

B

a {
  color: blue;
  &:hover {
    outline: 3px solid orange;
  }
}

C

a {
  color: blue;
  &:visited {
    outline: 3px solid orange;
  }
}

D

a {
  color: blue;
  &:focus {
    outline: 3px solid orange;
    outline-offset: 2px;
  }
}

💡 Hint

Focus styles help keyboard users see which element is active.

Option D adds a visible outline on focus, which helps keyboard users know which link is focused. Option D only adds outline on hover (mouse users). Option D removes outline on active, which reduces accessibility. Option D adds outline on visited, which is not related to focus.

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