CSS limitations that SASS solves - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What problem does SASS variables solve in CSS?

CSS does not support variables natively in older versions. What limitation does SASS variables help overcome?

A They allow reusing values like colors and sizes throughout the stylesheet easily.

B They enable CSS to run JavaScript code inside stylesheets.

C They automatically fix broken CSS selectors.

D They convert CSS into HTML automatically.

💡 Hint

Think about how you can avoid repeating the same color code many times.

SASS variables let you store values like colors or font sizes once and reuse them everywhere. This makes changing styles easier and reduces mistakes.

📝 Syntax

intermediate

Which SASS code correctly nests CSS selectors?

Nesting selectors is a feature SASS adds to CSS. Which option shows correct nesting syntax in SASS?

A

nav {
  ul
    margin: 0;
  }
}

B

nav > ul {
  margin: 0;
}

C

nav {
  ul {
    margin: 0;
  }
}

D

nav {
  ul: {
    margin: 0;
  }
}

💡 Hint

Look for curly braces inside curly braces.

SASS allows nesting selectors inside others using curly braces. This keeps related styles grouped and easier to read.

❓ selector

advanced

What is the output CSS of this SASS code with parent selector &?

Given this SASS code, what CSS does it produce?

button {
  &.active {
    color: red;
  }
}

SASS

button {
  &.active {
    color: red;
  }
}

A

button.active {
  color: red;
}

B

.active button {
  color: red;
}

C

button .active {
  color: red;
}

D

button > .active {
  color: red;
}

💡 Hint

The & symbol means the parent selector itself.

The & symbol in SASS means 'use the parent selector here'. So &.active becomes button.active in CSS.

❓ layout

advanced

How does SASS mixins improve CSS layout code?

Which option best describes how SASS mixins help with layout styles?

A Mixins remove the need for media queries in CSS.

B Mixins automatically create responsive grids without any code.

C Mixins convert CSS into JavaScript functions for layout.

D Mixins let you write reusable blocks of CSS that can include layout properties like flexbox settings.

💡 Hint

Think about repeating the same layout styles in many places.

Mixins let you write a group of CSS rules once and reuse them wherever needed. This is great for layouts like flexbox or grid that repeat often.

❓ accessibility

expert

How can SASS help maintain accessible color contrast?

Which SASS feature helps ensure color contrast stays accessible when changing theme colors?

A Using nesting to group unrelated styles.

B Using functions to calculate color brightness and adjust text color automatically.

C Using variables only for font sizes.

D Using mixins to hide content visually.

💡 Hint

Think about how to check if text color is readable on a background color.

SASS functions can calculate color brightness or contrast ratios. This lets you write code that changes text color based on background color to keep it readable.

Practice

1. Which of the following is a limitation of plain CSS that SASS helps to solve?

easy

A. No support for images in styles

B. Lack of variables to reuse values easily

C. Inability to add colors to elements

D. Cannot change font sizes

Solution

1. Step 1: Understand CSS limitations

   Plain CSS does not have variables, so you must repeat values like colors or sizes.

2. Step 2: Identify SASS feature solving this

   SASS introduces variables, allowing reuse of values and easier updates.

3. Final Answer:

   Lack of variables to reuse values easily -> Option B

4. Quick Check:

   Variables solve repeated values problem [OK]

Hint: Remember: variables = reuse values easily [OK]

Common Mistakes:

• Thinking CSS cannot add colors
• Confusing images with CSS limitations
• Believing font sizes can't be changed in CSS

2. Which SASS syntax correctly defines a variable for a primary color?

easy

A. @primary-color: #3498db;

B. var primary-color = #3498db;

C. primary-color: #3498db;

D. $primary-color: #3498db;

Solution

1. Step 1: Recall SASS variable syntax

   SASS variables start with a dollar sign ($) followed by the name and value.

2. Step 2: Match syntax to options

   $primary-color: #3498db; uses correct $ sign and colon syntax; others use invalid forms.

3. Final Answer:

   $primary-color: #3498db; -> Option D

4. Quick Check:

   SASS variables start with $ [OK]

Hint: Variables in SASS always start with $ [OK]

Common Mistakes:

• Using var keyword like JavaScript
• Omitting $ sign before variable name
• Using @ symbol incorrectly

3. What will be the output CSS of this SASS code?

$color: red;
.button {
  color: $color;
  &:hover {
    color: blue;
  }
}

medium

A. .button { color: red; } .button:hover { color: blue; }

B. .button { color: $color; } .button:hover { color: blue; }

C. .button { color: red; } &:hover { color: blue; }

D. .button { color: blue; } .button:hover { color: red; }

Solution

1. Step 1: Replace variable with value

   The variable $color is red, so color: $color becomes color: red.

2. Step 2: Understand nesting output

   The nested &:hover becomes .button:hover in CSS.

3. Final Answer:

   .button { color: red; } .button:hover { color: blue; } -> Option A

4. Quick Check:

   Variables replaced and nesting expanded [OK]

Hint: Variables replaced, nesting becomes combined selectors [OK]

Common Mistakes:

• Leaving $color as is in output
• Not expanding &:hover properly
• Swapping colors in hover

4. Identify the error in this SASS code:

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius;
}

medium

A. Missing semicolon after mixin definition

B. Mixin name misspelled

C. Mixin called without required argument

D. Variable $radius not defined

Solution

1. Step 1: Check mixin definition

   The mixin border-radius requires one argument $radius.

2. Step 2: Check mixin usage

   The mixin is included without passing any argument, causing an error.

3. Final Answer:

   Mixin called without required argument -> Option C

4. Quick Check:

   Mixin arguments must be passed when required [OK]

Hint: Pass all required mixin arguments [OK]

Common Mistakes:

• Forgetting to pass mixin arguments
• Assuming variables auto-defined
• Ignoring semicolon rules

5. You want to create a theme with two colors that can be switched easily. Which SASS feature helps you organize this best?

hard

A. Using variables and partial files with imports

B. Writing all styles in one big CSS file

C. Using inline styles in HTML

D. Using only plain CSS without variables

Solution

1. Step 1: Understand theme switching needs

   Switching themes requires organized, reusable styles for colors.

2. Step 2: Identify SASS features for organization

   Variables store colors; partial files and imports keep code modular and maintainable.

3. Step 3: Evaluate options

   Using variables and partial files with imports uses variables and partials, which is best practice. Others are poor for theme management.

4. Final Answer:

   Using variables and partial files with imports -> Option A

5. Quick Check:

   Variables + partials = organized theme [OK]

Hint: Use variables and partials for easy theme changes [OK]

Common Mistakes:

• Mixing all styles in one file
• Using inline styles for themes
• Ignoring variables for colors