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

Need a 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

Need a 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;

Need a 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

Need a hint?

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