SASS compilation to CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the compiled CSS output?

Given this SASS code, what is the compiled CSS output?

SASS

$primary-color: #333;

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    color: $primary-color;
    text-decoration: none;
  }
}

A

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  color: #333;
  text-decoration: none;
}

B

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
}
a {
  color: #333;
  text-decoration: none;
}

C

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    color: #333;
    text-decoration: none;
  }
}

D

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    display: inline-block;
  }
  a {
    color: #333;
    text-decoration: none;
  }
}

💡 Hint

Remember how nested selectors compile in SASS to CSS.

SASS nested selectors compile by combining parent selectors with nested ones. So 'nav ul' becomes 'nav ul' in CSS, not just 'ul'. Variables like $primary-color are replaced with their values.

🧠 Conceptual

intermediate

What error occurs when compiling this SASS code?

What error will the SASS compiler produce for this code?

SASS

$font-stack: Helvetica, sans-serif
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

A ReferenceError: $font-stack is undefined

B TypeError: Cannot assign color to font property

C SyntaxError: Missing semicolon after variable declaration

D No error, compiles successfully

💡 Hint

Check variable declarations carefully for punctuation.

In SASS, each variable declaration must end with a semicolon. Missing it causes a syntax error.

❓ selector

advanced

Which CSS selector is generated by this SASS code?

What is the CSS selector generated by this SASS snippet?

SASS

.container {
  & > .item {
    color: red;
  }
}

A .container& > .item { color: red; }

B .container > .item { color: red; }

C &.container > .item { color: red; }

D .container .item { color: red; }

💡 Hint

The & symbol represents the parent selector exactly.

The & symbol in SASS means 'use the parent selector here'. So '& > .item' becomes '.container > .item' in CSS.

❓ layout

advanced

What is the visual effect of this compiled CSS?

Given this SASS and its compiled CSS, what will you see on the page?

SASS

$gap: 1rem;

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $gap;
}

A A grid with three equal columns spaced evenly with 1rem gaps

B A grid with three columns but no gaps between items

C A flex container with three items spaced with 1rem gaps

D A block container with items stacked vertically with 1rem gaps

💡 Hint

Remember how CSS grid and gap properties work.

The CSS creates a grid with three equal columns and a 1rem gap between grid items, spacing them evenly.

❓ accessibility

expert

Which compiled CSS best supports accessible focus outlines?

Which compiled CSS from the SASS below ensures visible focus outlines for keyboard users?

SASS

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

A

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

B

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

C

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

D

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

💡 Hint

Focus outlines help keyboard users see where they are on the page.

Only option D applies a visible outline on focus, which is important for accessibility. Option D always shows outline, which is not ideal. Option D uses hover, not focus. Option D removes outline on focus, which is bad.