Component-based file organization in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use component-based file organization in Sass?

Which of the following is the main benefit of organizing Sass files by components?

A It makes styles easier to maintain and reuse by grouping related styles together.

B It allows Sass to compile files faster by compiling each component separately.

C It reduces the total size of the compiled CSS by removing unused styles automatically.

D It forces all styles to be global, so they apply everywhere without importing.

💡 Hint

Think about how grouping related styles helps when projects grow bigger.

Organizing Sass files by components groups related styles, making it easier to find, update, and reuse them. This improves maintainability and clarity.

📝 Syntax

intermediate

Correct way to import a component partial in Sass

Given a partial file named _button.scss inside a components folder, which import statement correctly includes it in main.scss?

SASS

/* main.scss */
@import ???;

A @import 'components/_button.scss';

B @import 'components/button';

C @import 'button';

D @import '_button';

💡 Hint

Remember Sass partials start with underscore but you don't include it in import.

When importing Sass partials, you omit the underscore and file extension. So @import 'components/button'; correctly imports _button.scss inside the components folder.

❓ selector

advanced

Specificity in component-based Sass files

If you have a _card.scss component with styles for .card and a global style for .card in main.scss, which style will apply if both set background-color?

SASS

/* _card.scss */
.card {
  background-color: blue;
}

/* main.scss */
.card {
  background-color: red;
}

A The red background from main.scss will apply because it is declared last in the compiled CSS.

B The blue background from _card.scss will apply because component styles are more specific.

C Both backgrounds will apply, layering colors on top of each other.

D Neither background will apply due to conflict; the element will be transparent.

💡 Hint

Think about CSS rules: when selectors have the same specificity, which one wins?

When selectors have the same specificity, the one declared last in the compiled CSS applies. Since main.scss is compiled after _card.scss, its .card background-color overrides the earlier one.

❓ layout

advanced

Using Flexbox in a component partial

You want to create a _navbar.scss component that lays out navigation links horizontally with space between them. Which Sass code snippet correctly uses Flexbox for this?

A

.navbar {
  display: grid;
  justify-content: space-between;
  align-items: center;
}

B

.navbar {
  display: block;
  justify-content: space-between;
  align-items: center;
}

C

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

D

.navbar {
  display: flex;
  justify-items: space-between;
  align-content: center;
}

💡 Hint

Flexbox uses justify-content and align-items for layout alignment.

Flexbox requires display: flex; and uses justify-content to space items horizontally and align-items to align them vertically. Option C correctly applies these.

❓ accessibility

expert

Ensuring accessible focus styles in component Sass files

You have a _button.scss component. Which Sass snippet best ensures visible focus outlines for keyboard users without affecting mouse users?

A

.button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

B

.button:focus {
  outline: none;
}

C

.button:hover {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

D

.button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

💡 Hint

Focus outlines should appear only when using keyboard navigation.

The :focus-visible pseudo-class applies styles only when the element is focused via keyboard, not mouse. This improves accessibility by showing outlines only when needed.