Reducing compiled CSS size in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use variables in Sass to reduce CSS size?

Using variables in Sass helps reduce the compiled CSS size because:

A Variables allow reusing values, so the compiler can optimize repeated values into shorter CSS.

B Variables convert all colors to hex codes, which are shorter than named colors.

C Variables automatically compress CSS by removing spaces and comments.

D Variables inline all styles, increasing CSS size but improving speed.

💡 Hint

Think about how repeating the same value many times affects file size.

Variables let you write a value once and reuse it many times. This helps the Sass compiler avoid repeating long values multiple times in the output CSS, reducing the file size.

📝 Syntax

intermediate

What is the output CSS from this Sass code?

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

SASS

$primary-color: #3498db;

.button {
  color: $primary-color;
  border: 1px solid $primary-color;
}

A

.button {
  color: #3498db;
  border: 1px solid #3498db;
}

B

.button {
  color: $primary-color;
  border: 1px solid $primary-color;
}

C

.button {
  color: blue;
  border: 1px solid blue;
}

D

.button {
  color: #3498db;
  border: 1px solid blue;
}

💡 Hint

Sass replaces variables with their values in the compiled CSS.

The Sass compiler replaces $primary-color with its value #3498db in the output CSS.

❓ selector

advanced

Which Sass selector nesting reduces compiled CSS size the most?

Consider these Sass snippets. Which one produces the smallest compiled CSS?

A

.nav {
  ul {
    margin: 0;
  }
  li {
    list-style: none;
  }
}

B

.nav ul {
  margin: 0;
}
.nav li {
  list-style: none;
}

C

.nav > ul {
  margin: 0;
}
.nav > li {
  list-style: none;
}

D

ul.nav {
  margin: 0;
}
li.nav {
  list-style: none;
}

💡 Hint

Look at how nesting affects the selectors in the compiled CSS.

Option B compiles to two simple selectors with the .nav class prefix, avoiding unnecessary nesting or child selectors, resulting in smaller CSS.

❓ layout

advanced

How does using Flexbox in Sass affect compiled CSS size?

Which statement about using Flexbox properties in Sass to reduce CSS size is true?

A Flexbox always increases CSS size because it requires many properties.

B Sass automatically removes unused Flexbox properties to reduce size.

C Using shorthand Flexbox properties in Sass reduces compiled CSS size by combining multiple properties.

D Using Flexbox in Sass requires writing all properties separately, increasing CSS size.

💡 Hint

Think about how shorthand properties work in CSS.

Flexbox shorthand properties like flex combine multiple settings into one line, reducing the total CSS size.

❓ accessibility

expert

Which Sass approach best supports accessible color contrast while minimizing CSS size?

You want to ensure text colors meet accessibility contrast standards but keep your compiled CSS small. Which Sass method is best?

A Hardcode all colors directly in selectors without variables to minimize Sass processing.

B Write separate CSS classes for each color contrast level without variables to keep code simple.

C Use inline styles in HTML for accessibility and avoid Sass variables to reduce CSS size.

D Define color variables and use Sass functions to adjust contrast dynamically, reusing variables to avoid repetition.

💡 Hint

Think about reusing values and dynamic adjustments in Sass.

Using variables with Sass functions to adjust colors dynamically allows you to maintain accessibility while reusing code, which keeps the compiled CSS smaller.