CSS limitations that SASS solves - Mini Project: Build & Apply

CSS Limitations That SASS Solves

📖 Scenario: You are building a simple webpage style using CSS. You want to organize colors and reuse styles easily, but plain CSS makes it hard to keep your code clean and consistent.

🎯 Goal: Create a SASS stylesheet that uses variables for colors, nesting for selectors, and mixins for reusable button styles to solve common CSS limitations.

📋 What You'll Learn

Use SASS variables to store primary and secondary colors

Use nesting to style a navigation menu inside a header

Create a mixin for a button style with padding and border-radius

Apply the button mixin to two different button classes

💡 Why This Matters

🌍 Real World

Web developers often use SASS to write cleaner, more maintainable CSS for websites and apps.

💼 Career

Knowing SASS is valuable for front-end developers to improve styling workflow and collaborate on large projects.

1

Create color variables

Create two SASS variables called $primary-color and $secondary-color with the values #3498db and #2ecc71 respectively.

SASS

# Your code here

Need a hint?

Use the $ sign to create variables in SASS, like $variable-name: value;

2

Nest styles for navigation menu

Add a header selector and nest a nav selector inside it. Inside nav, add a style for a tags that sets the color to $primary-color.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;

// Your code here

Need a hint?

Use nesting by placing selectors inside curly braces of their parent selectors.

3

Create a button mixin

Create a mixin called button-style that sets padding to 0.5rem 1rem and border-radius to 0.25rem.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;

header {
  nav {
    a {
      color: $primary-color;
    }
  }
}

// Your code here

Need a hint?

Use @mixin mixin-name { ... } to create reusable style blocks.

4

Apply mixin to buttons

Create two classes .btn-primary and .btn-secondary. Use the @include button-style inside both. Set the background-color of .btn-primary to $primary-color and .btn-secondary to $secondary-color.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;

header {
  nav {
    a {
      color: $primary-color;
    }
  }
}

@mixin button-style {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

// Your code here

Need a hint?

Use @include mixin-name; inside selectors to apply mixins.