Why migration to modern SASS matters - See It in Action

Why migration to modern SASS matters

📖 Scenario: You work for a small web design team. Your team currently uses old SASS syntax in your stylesheets. You want to show why moving to modern SASS syntax is important for better code and easier maintenance.

🎯 Goal: Create a simple SASS stylesheet using modern SASS features like variables, nesting, and mixins to demonstrate the benefits of migrating from old SASS syntax.

📋 What You'll Learn

Use SASS variables to store colors

Use nesting to organize CSS selectors

Create and use a mixin for reusable styles

Write code using modern SASS syntax (no indented syntax)

💡 Why This Matters

🌍 Real World

Modern SASS helps teams write cleaner, more maintainable CSS for websites and apps.

💼 Career

Knowing modern SASS syntax is valuable for front-end developers working on scalable projects.

1

Set up color variables

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

SASS

# Your code here

Need a hint?

Use $variable-name: value; syntax to create variables in SASS.

2

Add nested styles for a button

Create a CSS selector .button and nest inside it a selector for &:hover. Set the background color of .button to $primary-color and the background color of &:hover to $secondary-color.

SASS

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

// Add nested styles for .button and &:hover below

Need a hint?

Use nesting by placing &:hover inside .button block.

3

Create a mixin for rounded corners

Create a mixin called rounded-corners that sets border-radius to 0.5rem. Then include this mixin inside the .button selector.

SASS

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

.button {
  background-color: $primary-color;
  &:hover {
    background-color: $secondary-color;
  }
}

// Create mixin rounded-corners and include it in .button

Need a hint?

Define mixins with @mixin name { } and use them with @include name;.

4

Add a media query with nesting

Inside the .button selector, add a media query for screen widths less than 600px using @media (max-width: 600px). Inside this media query, set the font-size of .button to 1.2rem.

SASS

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

@mixin rounded-corners {
  border-radius: 0.5rem;
}

.button {
  background-color: $primary-color;
  @include rounded-corners;
  &:hover {
    background-color: $secondary-color;
  }

  // Add media query for max-width 600px here
}

Need a hint?

Use nesting to place media queries inside selectors for cleaner code.