Parent selector with & in SASS - Mini Project: Build & Apply

Using the Parent Selector & in Sass

📖 Scenario: You are creating a simple webpage with a button. You want to style the button and also style the button when it is hovered over. To keep your styles organized, you will use Sass and the parent selector & to write nested styles.

🎯 Goal: Build a Sass stylesheet that styles a button with a blue background and white text. When the user hovers over the button, the background should change to dark blue. Use the parent selector & to nest the hover style inside the button style.

📋 What You'll Learn

Create a Sass class called .btn with a blue background and white text color.

Add a nested hover style inside .btn using the parent selector &.

The hover style changes the background color to dark blue.

Use proper nesting and the & selector in Sass.

💡 Why This Matters

🌍 Real World

Buttons are common on websites and apps. Using Sass nesting with & helps keep styles organized and maintainable.

💼 Career

Front-end developers often use Sass to write cleaner CSS. Knowing how to use & for nesting is a key skill for styling interactive elements.

1

Create the base button style

Create a Sass class called .btn that sets the background color to #007BFF (blue) and the text color to #FFFFFF (white).

SASS

.btn {
  // Your code here
}

Need a hint?

Use background-color and color properties inside the .btn class.

2

Add the hover state configuration

Add a nested style inside the .btn class using the parent selector & to target the hover state with :hover. Just add the selector line &:hover inside .btn.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  // Add &:hover selector here
}

Need a hint?

Use &:hover inside .btn to start the hover style.

3

Set the hover background color

Inside the nested &:hover selector, set the background color to #0056b3 (dark blue).

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  &:hover {
    // Set background color here
  }
}

Need a hint?

Inside &:hover, write background-color: #0056b3;.

4

Complete the Sass with proper nesting

Make sure the entire Sass code has the .btn class with nested &:hover selector and the correct background colors and text color as specified.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  &:hover {
    background-color: #0056b3;
  }
  // Final check
}

Need a hint?

Review your code to ensure all parts are nested correctly and colors match.