Content blocks with @content in SASS - Mini Project: Build & Apply

Using Content Blocks with @content in Sass

📖 Scenario: You are creating a reusable button style in Sass. You want to allow different buttons to have custom inner styles or content blocks using @content. This helps keep your styles clean and flexible.

🎯 Goal: Build a Sass mixin called button-style that applies basic button styles and accepts a content block with @content to add extra styles inside the button.

📋 What You'll Learn

Create a mixin named button-style with basic button styles

Use @content inside the mixin to allow custom inner styles

Include the mixin in a class .btn-primary and add extra styles using the content block

Ensure the final CSS styles the button with base and custom styles

💡 Why This Matters

🌍 Real World

Using @content in Sass mixins helps create flexible, reusable style blocks for UI components like buttons, cards, or alerts.

💼 Career

Front-end developers often write Sass mixins with @content to keep CSS DRY and maintainable while allowing customization.

1

Create the button-style mixin with base styles

Write a Sass mixin named button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-weight to bold.

SASS

# Create the button-style mixin with padding, border-radius, and font-weight
@mixin button-style {
  // Your code here
}

Hint

Use @mixin button-style { ... } and add the three CSS properties inside.

2

Add @content inside the button-style mixin

Inside the button-style mixin, add @content after the base styles to allow custom styles to be inserted.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  // Add @content here
}

Hint

Place @content; inside the mixin after the base styles.

3

Include the button-style mixin in .btn-primary class

Create a CSS class .btn-primary and include the button-style mixin inside it using @include button-style.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  @content;
}

.btn-primary {
  // Include button-style mixin here
}

Hint

Use @include button-style { } inside the .btn-primary block.

4

Add custom background and color styles inside the mixin content block

Inside the @include button-style block in .btn-primary, add background-color: #007bff; and color: white; to style the button's background and text color.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  @content;
}

.btn-primary {
  @include button-style {
    // Add background-color and color here
  }
}

Hint

Inside the content block, add background-color: #007bff; and color: white;.