Combining & with pseudo-classes in SASS - Mini Project: Build & Apply

Combining & with pseudo-classes in Sass

📖 Scenario: You are creating a simple button style for a website. The button should change its background color when hovered over and when it is focused (for keyboard users). You will use Sass nesting and combine the & symbol with pseudo-classes to style these states.

🎯 Goal: Build a Sass stylesheet that styles a button with a blue background and white text. When the button is hovered over, the background should become dark blue. When the button is focused, the background should become light blue. Use the & symbol combined with pseudo-classes :hover and :focus inside the button style.

📋 What You'll Learn

Create a Sass selector for a class named .btn.

Set the button's background color to #007BFF and text color to white.

Use the &:hover pseudo-class to change the background color to #0056b3 when hovered.

Use the &:focus pseudo-class to change the background color to #66b2ff when focused.

Use nesting and the & symbol to combine the base selector with pseudo-classes.

💡 Why This Matters

🌍 Real World

Buttons are everywhere on websites and apps. Styling them with hover and focus states improves user experience and accessibility.

💼 Career

Knowing how to use Sass nesting and combine & with pseudo-classes is a common skill for front-end developers to write clean and efficient stylesheets.

1

Create the base button style

Create a Sass selector for the class .btn. Inside it, set the background-color to #007BFF and the color to white.

SASS

.btn {
  // Your code here
}

Need a hint?

Use .btn as the selector. Inside the curly braces, write background-color: #007BFF; and color: white;.

2

Add hover state using & with pseudo-class

Inside the .btn selector, add a nested rule using &:hover. Set its background-color to #0056b3.

SASS

.btn {
  background-color: #007BFF;
  color: white;

  // Add &:hover here
}

Need a hint?

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

3

Add focus state using & with pseudo-class

Inside the .btn selector, add another nested rule using &:focus. Set its background-color to #66b2ff.

SASS

.btn {
  background-color: #007BFF;
  color: white;

  &:hover {
    background-color: #0056b3;
  }

  // Add &:focus here
}

Need a hint?

Use &:focus inside .btn to style the focus state.

4

Complete the Sass with proper nesting

Ensure the full Sass code has the .btn selector with nested &:hover and &:focus pseudo-classes, each setting the correct background colors as before.

SASS

.btn {
  background-color: #007BFF;
  color: white;

  &:hover {
    background-color: #0056b3;
  }

  &:focus {
    background-color: #66b2ff;
  }

  // Final check
}

Need a hint?

Review your Sass code to confirm all parts are nested correctly with & and pseudo-classes.