Container and wrapper patterns in SASS - Mini Project: Build & Apply

Container and Wrapper Patterns with Sass

📖 Scenario: You are building a simple webpage layout that uses container and wrapper patterns to center content and limit its width for better readability on large screens.

🎯 Goal: Create a Sass stylesheet that defines a .container class to center content with a max width and padding, and a .wrapper class that adds a background color and some spacing around the container.

📋 What You'll Learn

Create a .container class with a max-width of 60rem, horizontal auto margin, and 1.5rem padding on left and right.

Create a $wrapper-bg-color variable set to #f0f0f0.

Create a .wrapper class that uses the $wrapper-bg-color as background color and adds 2rem padding.

Nest the .container class inside the .wrapper class using Sass nesting.

💡 Why This Matters

🌍 Real World

Container and wrapper patterns are common in web design to keep content readable and visually appealing on different screen sizes.

💼 Career

Understanding these patterns and Sass nesting is important for front-end developers to write maintainable and scalable CSS.

1

Create the .container class

Write a Sass class called .container that sets max-width to 60rem, horizontal margins to auto, and horizontal padding to 1.5rem.

SASS

# Create the .container class with max-width, margin, and padding

# Your code here

Need a hint?

Use max-width to limit width, margin-left and margin-right set to auto to center horizontally, and padding-left and padding-right for horizontal spacing.

2

Add the $wrapper-bg-color variable

Create a Sass variable called $wrapper-bg-color and set it to the color #f0f0f0.

SASS

.container {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

// Define $wrapper-bg-color variable

# Your code here

Need a hint?

Use $wrapper-bg-color: #f0f0f0; to create the variable.

3

Create the .wrapper class with background and padding

Write a Sass class called .wrapper that sets background-color to $wrapper-bg-color and adds 2rem padding on all sides.

SASS

$wrapper-bg-color: #f0f0f0;

.container {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

// Create .wrapper class with background-color and padding

# Your code here

Need a hint?

Use background-color: $wrapper-bg-color; and padding: 2rem; inside the .wrapper class.

4

Nest the .container class inside .wrapper

Nest the existing .container class inside the .wrapper class using Sass nesting syntax.

SASS

$wrapper-bg-color: #f0f0f0;

.container {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.wrapper {
  background-color: $wrapper-bg-color;
  padding: 2rem;

  // Nest .container here
  
  # Your code here
}

Need a hint?

Move the .container class inside .wrapper using Sass nesting by placing .container { ... } inside .wrapper { ... }.