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
}

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
}

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
}

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
}

Hint

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

Practice

1. What does the & symbol represent when used with pseudo-classes in Sass?

easy

A. It comments out the following code.

B. It creates a new HTML element automatically.

C. It resets all styles to default.

D. It refers to the parent selector, allowing you to combine it with pseudo-classes.

Solution

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

   The & symbol stands for the parent selector in Sass, meaning it represents the current selector where it is used.

2. Step 2: Combining & with pseudo-classes

   When combined with pseudo-classes like :hover, it creates a selector that targets the parent element in that state, e.g., .button:hover.

3. Final Answer:

   It refers to the parent selector, allowing you to combine it with pseudo-classes. -> Option D

4. Quick Check:

   & = parent selector [OK]

Hint: Remember & means parent selector in Sass [OK]

Common Mistakes:

• Thinking & creates new elements
• Confusing & with comments
• Assuming & resets styles

2. Which of the following Sass snippets correctly applies a hover style to a button using & with a pseudo-class?

easy

A. .button { &hover { color: red; } }

B. .button { &:hover { color: red; } }

C. .button { &:hover() { color: red; } }

D. .button { &:hover: { color: red; } }

Solution

1. Step 1: Check correct pseudo-class syntax

   The correct syntax for pseudo-classes in Sass uses &:hover without parentheses or extra colons.

2. Step 2: Identify the valid option

   .button { &:hover { color: red; } } uses &:hover correctly. The other options have syntax errors: missing colon, parentheses, or extra colon.

3. Final Answer:

   .button { &:hover { color: red; } } -> Option B

4. Quick Check:

   Correct pseudo-class syntax = .button { &:hover { color: red; } } [OK]

Hint: Pseudo-classes always start with a colon after & [OK]

Common Mistakes:

• Omitting colon before pseudo-class
• Adding parentheses after pseudo-class
• Using extra colon after pseudo-class

3. Given the Sass code:

.nav { color: black; &:hover { color: blue; } }

What color will the text inside <div class="nav"> be when hovered?

medium

A. Blue

B. Red

C. Black

D. No color change

Solution

1. Step 1: Understand base and hover styles

   The base color for .nav is black. The hover pseudo-class changes color to blue.

2. Step 2: Determine hover effect

   When the mouse pointer is over the .nav element, the color changes to blue as defined by &:hover { color: blue; }.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Hover changes color to blue [OK]

Hint: Hover styles override base styles on mouse over [OK]

Common Mistakes:

• Ignoring hover styles
• Confusing base color with hover color
• Assuming no style change on hover

4. Identify the error in this Sass code snippet:

.link { &hover { text-decoration: underline; } }

medium

A. Missing colon before pseudo-class hover.

B. Incorrect use of & symbol.

C. Pseudo-class hover should be uppercase.

D. Text-decoration property is invalid.

Solution

1. Step 1: Check pseudo-class syntax

   Pseudo-classes must start with a colon (:), so hover should be :hover.

2. Step 2: Identify the error

   The code uses &hover without colon, which is invalid syntax in Sass.

3. Final Answer:

   Missing colon before pseudo-class hover. -> Option A

4. Quick Check:

   Pseudo-classes need colon [OK]

Hint: Always put colon before pseudo-classes like :hover [OK]

Common Mistakes:

• Omitting colon before pseudo-class
• Assuming & alone is enough
• Capitalizing pseudo-class names

5. You want to style a button so that when it is focused or hovered, its background changes to green. Which Sass code correctly combines & with multiple pseudo-classes?

hard

A. .button { &:hover &:focus { background: green; } }

B. .button { &hover, &focus { background: green; } }

C. .button { &:hover, &:focus { background: green; } }

D. .button { &:hover:focus { background: green; } }

Solution

1. Step 1: Understand combining multiple pseudo-classes

   To apply styles on hover or focus, selectors must be separated by a comma, each starting with &:.

2. Step 2: Analyze each option

   .button { &:hover, &:focus { background: green; } } correctly uses &:hover, &:focus. .button { &hover, &focus { background: green; } } misses colons. .button { &:hover &:focus { background: green; } } combines selectors incorrectly (descendant). .button { &:hover:focus { background: green; } } tries to chain pseudo-classes, which is invalid here.

3. Final Answer:

   .button { &:hover, &:focus { background: green; } } -> Option C

4. Quick Check:

   Separate pseudo-classes with commas and colons [OK]

Hint: Use commas and colons for multiple pseudo-classes [OK]

Common Mistakes:

• Missing colon before pseudo-classes
• Combining pseudo-classes without commas
• Chaining pseudo-classes incorrectly