Combining & with BEM naming in SASS - Mini Project: Build & Apply

Combining & with BEM naming in Sass

📖 Scenario: You are creating a simple card component for a website. The card has a block called card, and inside it, there is an element called title. You want to style the card and its title using Sass with BEM naming conventions.

🎯 Goal: Build Sass styles using the & symbol combined with BEM naming to style the card block and its title element.

📋 What You'll Learn

Create a Sass block selector named .card

Create a Sass variable called $title-color with the value #2a9d8f

Use the & symbol combined with BEM naming to style the .card__title element inside the .card block

Set the color of .card__title to the Sass variable $title-color

💡 Why This Matters

🌍 Real World

Using BEM naming with Sass nesting helps keep CSS organized and easy to maintain in real web projects.

💼 Career

Front-end developers often use Sass and BEM to write scalable and clean CSS for websites and apps.

1

Create the .card block selector

Create a Sass block selector called .card.

SASS

// Create the .card block selector
// Your code here

Hint

Use .card { } to start the block selector.

2

Add a Sass variable $title-color

Add a Sass variable called $title-color and set it to #2a9d8f.

SASS

.card {

}

// Add the $title-color variable below
// Your code here

Hint

Use $title-color: #2a9d8f; to create the variable.

3

Use & with BEM to style .card__title

Inside the .card block, use the & symbol combined with BEM naming to create the selector .card__title. Set its color property to the Sass variable $title-color.

SASS

.card {
  // Use & with BEM to style .card__title
  // Your code here
}

$title-color: #2a9d8f;

Hint

Use &__title { color: $title-color; } inside .card.

4

Complete the Sass with proper structure

Make sure the Sass code has the .card block, the $title-color variable, and the nested &__title selector with the color set. The code should be valid Sass and ready to compile.

SASS

// Review and finalize the Sass code
// Your code here

Hint

Place the variable at the top and the block with nested element below.

Practice

1. What does the & symbol represent when used in Sass with BEM naming?

easy

A. It resets all styles inside the block.

B. It creates a new CSS class unrelated to the parent.

C. It imports external CSS files.

D. It refers to the current parent selector in the nested block.

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol in Sass means "use the current parent selector" inside nested rules.

2. Step 2: Connect with BEM naming

   When combined with BEM, &__element or &--modifier appends to the parent block's class name.

3. Final Answer:

   It refers to the current parent selector in the nested block. -> Option D

4. Quick Check:

   & = current parent selector [OK]

Hint: Remember & means "this block" in nested Sass [OK]

Common Mistakes:

• Thinking & creates a new unrelated class
• Confusing & with a CSS variable
• Using & to import files

2. Which of the following Sass snippets correctly uses & to create a BEM modifier for a block named .card?

easy

A. &__active { background: green; }

B. .card--active { background: green; }

C. &--active { background: green; }

D. &-active { background: green; }

Solution

1. Step 1: Identify BEM modifier syntax

   Modifiers use double dashes: --modifier, so &--active appends --active to the parent block.

2. Step 2: Check other options

   .card--active { background: green; } repeats the full class, not using &. &__active { background: green; } uses __ which is for elements, not modifiers. &-active { background: green; } uses a single dash, which is incorrect for BEM modifiers.

3. Final Answer:

   &--active { background: green; } -> Option C

4. Quick Check:

   Modifier = &--modifier [OK]

Hint: Use &--modifier for modifiers inside blocks [OK]

Common Mistakes:

• Using single dash instead of double dash for modifiers
• Confusing elements (__element) with modifiers (--modifier)
• Writing full class name instead of using &

3. Given the Sass code below, what CSS will it generate?

.button {
  color: blue;
  &__icon {
    margin-right: 0.5rem;
  }
  &--large {
    font-size: 2rem;
  }
}

medium

A. .button { color: blue; } &__icon { margin-right: 0.5rem; } &--large { font-size: 2rem; }

B. .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; }

C. .button { color: blue; } .icon { margin-right: 0.5rem; } .large { font-size: 2rem; }

D. .button { color: blue; } .button_icon { margin-right: 0.5rem; } .button_large { font-size: 2rem; }

Solution

1. Step 1: Understand & usage in nested selectors

   The & appends to the parent selector .button. So &__icon becomes .button__icon and &--large becomes .button--large.

2. Step 2: Write the generated CSS

   The CSS will have three selectors: .button, .button__icon, and .button--large with their respective styles.

3. Final Answer:

   .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; } -> Option B

4. Quick Check:

   & + BEM = combined class names [OK]

Hint: &__element and &--modifier append to block class [OK]

Common Mistakes:

• Using underscore instead of double underscore for elements
• Not combining & with parent selector
• Leaving & in final CSS

4. Identify the error in this Sass code using BEM naming:

.menu {
  &__item {
    color: black;
  }
  &-active {
    font-weight: bold;
  }
}

medium

A. The modifier should use double dashes: &--active instead of &-active.

B. The element selector &__item is invalid and should be &-item.

C. The parent selector .menu is missing a dot.

D. The color property cannot be inside &__item.

Solution

1. Step 1: Check BEM modifier syntax

   Modifiers in BEM use double dashes --, so &-active is incorrect; it should be &--active.

2. Step 2: Verify element syntax

   &__item is correct for elements, so no error there.

3. Final Answer:

   The modifier should use double dashes: &--active instead of &-active. -> Option A

4. Quick Check:

   Modifier syntax = &--modifier [OK]

Hint: Modifiers always use double dashes -- not single [OK]

Common Mistakes:

• Using single dash for modifiers
• Confusing element and modifier syntax
• Thinking &__item is invalid

5. You want to style a BEM block .profile with an element avatar and a modifier highlighted. Which Sass code correctly combines & with BEM naming to style both the element and modifier inside .profile?

hard

A. .profile {
&__avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

B. .profile {
&-avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

C. .profile {
&__avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

D. .profile {
&-avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

Solution

1. Step 1: Apply BEM element syntax

   Elements use double underscore __, so &__avatar correctly targets .profile__avatar.

2. Step 2: Apply BEM modifier syntax

   Modifiers use double dash --, so &--highlighted correctly targets .profile--highlighted.

3. Step 3: Check other options

   Options A, C, and D use single dash for either element or modifier, which is incorrect in BEM.

4. Final Answer:

   .profile { &__avatar { border-radius: 50%; } &--highlighted { background-color: yellow; } } -> Option A

5. Quick Check:

   Element = &__element, Modifier = &--modifier [OK]

Hint: Use &__element and &--modifier exactly for BEM [OK]

Common Mistakes:

• Using single dash for elements or modifiers
• Mixing element and modifier syntax
• Not nesting inside the block selector