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.

Practice

1. Which of the following is the best way to reduce the size of compiled CSS when using Sass?

easy

A. Write very deep nesting of selectors for clarity

B. Use variables and mixins to avoid repeating the same styles

C. Add comments in Sass files to explain styles

D. Use many separate Sass files without combining them

Solution

1. Step 1: Understand Sass features for reuse

   Variables and mixins let you reuse style code instead of repeating it multiple times.

2. Step 2: Compare with other options

   Deep nesting creates many selectors increasing CSS size. Comments do not reduce CSS size. Many files without combining can increase HTTP requests.

3. Final Answer:

   Use variables and mixins to avoid repeating the same styles -> Option B

4. Quick Check:

   Reuse styles = smaller CSS [OK]

Hint: Reuse styles with variables and mixins to shrink CSS [OK]

Common Mistakes:

• Thinking deep nesting reduces CSS size
• Believing comments affect compiled CSS size
• Assuming splitting files always reduces size

2. Which Sass syntax correctly defines a mixin to reduce repeated styles?

easy

A. @function button-style() {\n padding: 1rem;\n border-radius: 0.5rem;\n}

B. @include button-style {\n padding: 1rem;\n border-radius: 0.5rem;\n}

C. @extend button-style {\n padding: 1rem;\n border-radius: 0.5rem;\n}

D. @mixin button-style {\n padding: 1rem;\n border-radius: 0.5rem;\n}

Solution

1. Step 1: Identify mixin syntax

   The correct way to define a mixin is using @mixin name { ... }.

2. Step 2: Differentiate from other directives

   @include is used to use a mixin, not define it. @function defines functions, not mixins. @extend is for inheritance, not mixin definition.

3. Final Answer:

   @mixin button-style { padding: 1rem; border-radius: 0.5rem; } -> Option D

4. Quick Check:

   Define mixin = @mixin [OK]

Hint: Define mixins with @mixin, use with @include [OK]

Common Mistakes:

• Confusing @include with @mixin for definition
• Using @function instead of @mixin
• Trying to define mixin with @extend

3. Given this Sass code, what will be the compiled CSS size impact?

$color: blue;

.button {
  color: $color;
  @include rounded-corners;
}

@mixin rounded-corners {
  border-radius: 0.5rem;
  border: 1px solid $color;
}

medium

A. The CSS will be larger because mixins duplicate code each use

B. The CSS will be smaller because styles are reused via mixin

C. The CSS will have syntax errors and not compile

D. The CSS will ignore the mixin and only use color

Solution

1. Step 1: Understand mixin behavior

   Mixins insert their styles wherever included, duplicating code each time.

2. Step 2: Analyze code impact

   Since @include rounded-corners adds border-radius and border styles inside .button, these styles are duplicated in CSS for each use.

3. Final Answer:

   The CSS will be larger because mixins duplicate code each use -> Option A

4. Quick Check:

   Mixins duplicate styles = larger CSS [OK]

Hint: Mixins duplicate styles; use carefully to reduce size [OK]

Common Mistakes:

• Assuming mixins always reduce CSS size
• Thinking variables reduce duplication inside mixins
• Believing mixins cause syntax errors here

4. This Sass code aims to reduce CSS size but causes unexpected large output. What is the error?

.card {
  .header {
    color: red;
    .title {
      font-weight: bold;
    }
  }
}

medium

A. Mixins are not included for repeated styles

B. Missing semicolons cause syntax errors

C. Nesting is too deep, creating many selectors increasing CSS size

D. Variables are not used for colors

Solution

1. Step 1: Examine nesting depth

   The code nests .header inside .card and .title inside .header, creating selectors like .card .header .title.

2. Step 2: Understand CSS size impact

   Deep nesting creates many combined selectors, increasing compiled CSS size and complexity.

3. Final Answer:

   Nesting is too deep, creating many selectors increasing CSS size -> Option C

4. Quick Check:

   Deep nesting = bigger CSS [OK]

Hint: Keep nesting shallow to avoid large CSS selectors [OK]

Common Mistakes:

• Ignoring nesting depth impact on CSS size
• Looking for syntax errors when none exist
• Thinking variables fix nesting issues

5. You want to reduce compiled CSS size by reusing button styles but avoid duplication from mixins. Which Sass feature helps achieve this best?

hard

A. Use @extend to share styles between selectors

B. Use deeply nested selectors for buttons

C. Use multiple mixins for each style property

D. Write all styles inline without variables

Solution

1. Step 1: Understand @extend behavior

   @extend shares selectors in compiled CSS, avoiding duplication by merging rules.

2. Step 2: Compare with mixins

   Mixins duplicate styles each use, increasing CSS size. @extend reuses styles without duplication.

3. Final Answer:

   Use @extend to share styles between selectors -> Option A

4. Quick Check:

   @extend shares styles, reduces CSS size [OK]

Hint: Use @extend to share styles without duplicating CSS [OK]

Common Mistakes:

• Using mixins expecting no duplication
• Nesting deeply to reuse styles
• Avoiding variables and mixins altogether