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.

Practice

1. What is the main reason we need to compile .scss files into .css files?

easy

A. CSS files are easier to write than SASS files.

B. Browsers only understand CSS, not SASS syntax.

C. SASS files are too large to load directly in browsers.

D. SASS files cannot be saved on a server.

Solution

1. Step 1: Understand browser compatibility

   Browsers can only read CSS files to style web pages, not SASS files which have extra syntax.

2. Step 2: Role of compilation

   Compiling converts SASS code into plain CSS that browsers can understand and apply.

3. Final Answer:

   Browsers only understand CSS, not SASS syntax. -> Option B

4. Quick Check:

   SASS must be compiled to CSS for browser use [OK]

Hint: Remember: browsers read CSS, not SASS files [OK]

Common Mistakes:

• Thinking browsers can read SASS directly
• Confusing file size with compatibility
• Believing SASS files run on servers

2. Which of the following is the correct command to compile a SASS file named style.scss into CSS using the terminal?

easy

A. sass style.scss style.css

B. sass build style.scss style.css

C. sass --convert style.scss style.css

D. sass compile style.scss style.css

Solution

1. Step 1: Recall SASS compile command syntax

   The basic command is sass input.scss output.css to compile SASS to CSS.

2. Step 2: Match the correct command

   sass style.scss style.css matches this syntax exactly: sass style.scss style.css.

3. Final Answer:

   sass style.scss style.css -> Option A

4. Quick Check:

   Use sass input.scss output.css to compile [OK]

Hint: Use 'sass input.scss output.css' to compile files [OK]

Common Mistakes:

• Adding extra words like 'compile' or 'build'
• Using wrong flags like '--convert'
• Confusing command order

3. Given this SASS code in style.scss:

$main-color: #3498db;
body {
  background-color: $main-color;
}

What will be the compiled CSS output?

medium

A. body { background-color: $main-color; }

B. body { background-color: main-color; }

C. body { background-color: #3498db; }

D. body { background-color: #000000; }

Solution

1. Step 1: Understand variable usage in SASS

   The variable $main-color holds the color value #3498db.

2. Step 2: Compilation replaces variables with values

   During compilation, $main-color is replaced by #3498db in the CSS output.

3. Final Answer:

   body { background-color: #3498db; } -> Option C

4. Quick Check:

   SASS variables compile to their values in CSS [OK]

Hint: SASS variables become their values in CSS output [OK]

Common Mistakes:

• Leaving variables as-is in CSS
• Using variable name without $ sign
• Replacing variable with wrong value

4. You run the command sass --watch style.scss style.css but the CSS file does not update when you change style.scss. What is the most likely problem?

medium

A. You forgot to save the style.scss file after editing.

B. The --watch option only works with .sass files, not .scss.

C. You need to restart the computer for changes to apply.

D. The CSS file must be manually deleted before updating.

Solution

1. Step 1: Understand how --watch works

   The --watch option monitors the SASS file for changes and recompiles automatically when saved.

2. Step 2: Identify common user error

   If the file is edited but not saved, the watcher does not detect changes, so CSS won't update.

3. Final Answer:

   You forgot to save the style.scss file after editing. -> Option A

4. Quick Check:

   Save files to trigger --watch recompilation [OK]

Hint: Always save your SASS file to trigger watch updates [OK]

Common Mistakes:

• Assuming watch only works with .sass files
• Restarting computer unnecessarily
• Manually deleting CSS before update

5. You want to automatically update your CSS file whenever you change any SASS file in the styles/ folder. Which command should you use?

hard

A. sass styles/:styles --watch

B. sass --watch styles/:styles/

C. sass --watch styles/style.scss styles/style.css

D. sass --watch styles/:styles --style compressed

Solution

1. Step 1: Understand folder watching syntax

   To watch a folder, use sass --watch input/:output/ syntax.

2. Step 2: Identify correct command

   sass --watch styles/:styles --style compressed watches the styles/ folder and outputs compressed CSS to the same folder.

3. Final Answer:

   sass --watch styles/:styles --style compressed -> Option D

4. Quick Check:

   Use folder watch syntax sass --watch input:output with style flag [OK]

Hint: Use folder watch syntax with colon: input_folder:output_folder and add style flag [OK]

Common Mistakes:

• Watching single files instead of folders
• Wrong order of flags and arguments
• Missing colon between input and output folders