Bootstrap SASS variable overrides - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How to override Bootstrap SASS variables correctly?

You want to change Bootstrap's primary color by overriding the SASS variable $primary. Where should you place your override to ensure it works?

A Override <code>$primary</code> before importing <code>bootstrap.scss</code> in your SASS file.

B Override <code>$primary</code> in a separate CSS file loaded after Bootstrap CSS.

C Override <code>$primary</code> inside the compiled CSS file after build.

D Override <code>$primary</code> after importing <code>bootstrap.scss</code> in your SASS file.

💡 Hint

Think about when SASS variables are read during compilation.

Bootstrap SASS variables must be overridden before importing Bootstrap's main SASS file. This way, Bootstrap uses your custom values during compilation.

Overriding after import or in CSS files won't affect Bootstrap's compiled styles.

📝 Syntax

intermediate

What is the correct syntax to override Bootstrap's font size variable?

You want to set Bootstrap's $font-size-base to 1.25rem. Which SASS code snippet correctly overrides this variable?

A $font-size-base: 1.25rem;

B $font-size-base = 1.25rem;

C $font-size-base => 1.25rem;

D font-size-base: 1.25rem;

💡 Hint

Remember how variables are assigned in SASS.

SASS variables use a colon : to assign values, like $variable: value;.

Option A uses the correct syntax.

❓ rendering

advanced

What color will the primary button show after overriding $primary variable?

Given this SASS code, what will be the background color of .btn-primary after compilation?

Bootsrap

$primary: #28a745;
@import 'bootstrap';

A Red (#dc3545) - Bootstrap danger color

B Blue (#0d6efd) - Bootstrap default primary color

C Green (#28a745) - The overridden color

D Gray (#6c757d) - Bootstrap secondary color

💡 Hint

The $primary variable controls the primary color.

Overriding $primary before importing Bootstrap changes the primary color globally.

Here, .btn-primary uses the new green color #28a745.

❓ selector

advanced

Which SASS variable controls Bootstrap's body background color?

You want to change the background color of the entire page by overriding a Bootstrap SASS variable. Which variable should you override?

A $page-bg

B $body-bg

C $background-color

D $bg-primary

💡 Hint

Look for a variable that clearly relates to the body background.

The variable $body-bg controls the background color of the <body> element in Bootstrap.

Other options are not defined Bootstrap variables.

❓ accessibility

expert

How to override Bootstrap SASS variables to improve color contrast for accessibility?

You want to improve text readability by increasing contrast between text and background in Bootstrap. Which approach using SASS variable overrides is best?

A Override <code>$font-family-base</code> to a decorative font for better readability.

B Override <code>$primary</code> to a lighter color only after importing Bootstrap.

C Override <code>$link-color</code> to a color similar to background to reduce distraction.

D Override <code>$body-color</code> to a darker color and <code>$body-bg</code> to a lighter color before importing Bootstrap.

💡 Hint

Think about contrast between text and background colors.

Good accessibility requires high contrast between text and background.

Overriding $body-color to a darker color and $body-bg to a lighter color before importing Bootstrap ensures consistent high contrast.

Other options reduce contrast or do not affect color contrast.

Practice

1. What is the correct way to override a Bootstrap SASS variable like $primary color?

easy

A. Set $primary before importing Bootstrap's SASS files

B. Set $primary after importing Bootstrap's SASS files

C. Change the CSS file directly without using SASS variables

D. Override $primary inside the compiled CSS file

Solution

1. Step 1: Understand Bootstrap SASS variable loading

   Bootstrap uses SASS variables during compilation, so variables must be set before importing Bootstrap's SASS files to take effect.

2. Step 2: Apply variable override before import

   By setting $primary before the import, Bootstrap uses the new value instead of the default.

3. Final Answer:

   Set $primary before importing Bootstrap's SASS files -> Option A

4. Quick Check:

   Override variables before import = A [OK]

Hint: Always set variables before importing Bootstrap [OK]

Common Mistakes:

• Setting variables after importing Bootstrap
• Editing compiled CSS instead of SASS variables
• Trying to override variables in CSS files

2. Which of the following is the correct syntax to override the Bootstrap SASS variable $font-size-base to 1.25rem?

easy

A. $font-size-base: 1.25rem !default;

B. $font-size-base: 1.25rem;

C. font-size-base: 1.25rem;

D. $font-size-base = 1.25rem;

Solution

1. Step 1: Recall SASS variable syntax

   SASS variables use $variable-name: value; syntax without equals sign or !default when overriding.

2. Step 2: Identify correct override syntax

   To override, simply assign $font-size-base: 1.25rem; before importing Bootstrap.

3. Final Answer:

   $font-size-base: 1.25rem; -> Option B

4. Quick Check:

   SASS variable override syntax = D [OK]

Hint: Use colon and semicolon, no equals sign for SASS variables [OK]

Common Mistakes:

• Using equals sign instead of colon
• Adding !default when overriding
• Omitting the $ sign before variable name

3. Given this SASS code snippet, what will be the background color of a Bootstrap button?

$btn-primary-bg: #ff0000;
@import 'bootstrap';

medium

A. Black

B. Default Bootstrap blue

C. Transparent

D. Red (#ff0000)

Solution

1. Step 1: Check variable override before import

   The variable $btn-primary-bg is set to red before importing Bootstrap, so Bootstrap uses this value.

2. Step 2: Understand Bootstrap button background

   Bootstrap buttons use $btn-primary-bg for the primary button background color.

3. Final Answer:

   Red (#ff0000) -> Option D

4. Quick Check:

   Override variable before import changes button color = A [OK]

Hint: Override color variables before import to change styles [OK]

Common Mistakes:

• Expecting default color despite override
• Setting variable after import
• Confusing variable names

4. You tried to override $spacer to 3rem but your Bootstrap layout spacing did not change. What is the most likely mistake?

medium

A. A, B, and D

B. You used $spacer = 3rem; instead of colon syntax

C. You set $spacer after importing Bootstrap SASS files

D. You forgot to recompile your SASS files after changes

Solution

1. Step 1: Check variable override timing

   Setting $spacer after importing Bootstrap has no effect because variables must be set before import.

2. Step 2: Verify syntax and compilation

   Using equals sign is invalid syntax and forgetting to recompile means changes won't apply.

3. Step 3: Combine all errors

   Any of these mistakes can cause the override to fail, so all are likely causes.

4. Final Answer:

   A, B, and D -> Option A

5. Quick Check:

   Timing, syntax, and compilation errors cause override failure = C [OK]

Hint: Check override order, syntax, and recompile after changes [OK]

Common Mistakes:

• Setting variables after import
• Using wrong syntax with equals sign
• Not recompiling SASS after changes

5. You want to customize Bootstrap's primary color and font size but keep your changes easy to update later. Which approach is best?

hard

A. Edit Bootstrap's original SASS files directly to change variables

B. Override variables in CSS after Bootstrap is loaded

C. Create a separate SASS file that sets $primary and $font-size-base before importing Bootstrap

D. Use JavaScript to change styles dynamically after page load

Solution

1. Step 1: Understand maintainability best practices

   Editing Bootstrap's original files makes updates hard and error-prone.

2. Step 2: Use separate SASS file for overrides

   Setting variables in a separate file before importing Bootstrap keeps customizations clean and easy to update.

3. Step 3: Avoid CSS or JS overrides for variables

   CSS overrides can't change SASS variables, and JS changes styles after load, not at compile time.

4. Final Answer:

   Create a separate SASS file that sets $primary and $font-size-base before importing Bootstrap -> Option C

5. Quick Check:

   Separate override file before import = B [OK]

Hint: Keep overrides separate and before import for easy updates [OK]

Common Mistakes:

• Editing Bootstrap source files directly
• Trying to override variables in CSS
• Using JavaScript for style changes instead of SASS