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.