Placeholder selectors with % in SASS - Mini Project: Build & Apply

Building a Button Style with Sass Placeholder Selectors

📖 Scenario: You are creating a website with buttons that share common styles. To keep your CSS clean and avoid repeating code, you will use Sass placeholder selectors. These placeholders let you write styles once and reuse them in different button classes.

🎯 Goal: Build a Sass file that defines a placeholder selector for button styles, then create two button classes that reuse this placeholder. This will produce consistent button styles with minimal repeated code.

📋 What You'll Learn

Create a Sass placeholder selector named %button-style with padding and border radius.

Create a variable $primary-color with the value #3498db.

Create a class .btn-primary that uses %button-style and sets the background color to $primary-color.

Create a class .btn-secondary that uses %button-style and sets the background color to #95a5a6.

💡 Why This Matters

🌍 Real World

Web developers often need to style multiple buttons or components with shared styles. Using Sass placeholders helps write cleaner, reusable CSS.

💼 Career

Knowing how to use Sass placeholders and variables is a valuable skill for front-end developers to write maintainable and scalable stylesheets.

1

Create the placeholder selector %button-style

Write a Sass placeholder selector called %button-style that sets padding to 1rem 2rem and border-radius to 0.5rem.

SASS

// Your code here

Hint

Use %button-style followed by curly braces and add the padding and border-radius inside.

2

Create the variable $primary-color

Add a Sass variable named $primary-color and set it to the color #3498db.

SASS

%button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

// Your code here

Hint

Use $primary-color: #3498db; to create the variable.

3

Create the .btn-primary class using the placeholder

Write a Sass class called .btn-primary that @extends the %button-style placeholder and sets background-color to $primary-color.

SASS

%button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

$primary-color: #3498db;

// Your code here

Hint

Use @extend %button-style; inside .btn-primary and set the background color to $primary-color.

4

Create the .btn-secondary class using the placeholder

Write a Sass class called .btn-secondary that @extends the %button-style placeholder and sets background-color to #95a5a6.

SASS

%button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

$primary-color: #3498db;

.btn-primary {
  @extend %button-style;
  background-color: $primary-color;
}

// Your code here

Hint

Use @extend %button-style; inside .btn-secondary and set the background color to #95a5a6.