Future CSS features replacing SASS - Mini Project: Build & Apply

Using Future CSS Features to Replace SASS Variables and Nesting

📖 Scenario: You are building a simple website style using modern CSS features that can replace some common SASS features like variables and nesting.This helps you write CSS without needing a preprocessor, making your styles easier to maintain and faster to load.

🎯 Goal: Create a CSS style using native CSS custom properties (variables) and nesting to style a navigation menu with colors and hover effects.

📋 What You'll Learn

Use CSS custom properties to define colors instead of SASS variables

Use native CSS nesting to style nested elements instead of SASS nesting

Create a navigation bar with background color and link hover color using these features

Ensure the CSS is valid and works in modern browsers

💡 Why This Matters

🌍 Real World

Modern CSS features reduce the need for preprocessors like SASS, simplifying your workflow and improving performance.

💼 Career

Front-end developers increasingly use native CSS features to write cleaner, faster, and more maintainable stylesheets.

1

Create CSS custom properties for colors

Write CSS code that defines two custom properties inside the :root selector: --main-bg-color with the value #3498db and --main-text-color with the value #ffffff.

SASS

:root {
  /* Define custom properties here */
  
}

Need a hint?

Use :root to define global CSS variables with --variable-name: value;.

2

Create a navigation bar container with background color

Add a CSS rule for the nav element that sets its background color to the custom property --main-bg-color and adds padding of 1rem.

SASS

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
}

nav {
  /* Set background color and padding here */
}

Need a hint?

Use var(--main-bg-color) to access the custom property value.

3

Style navigation links with native CSS nesting

Inside the nav rule, use native CSS nesting to style a elements so that their text color is the custom property --main-text-color and remove the underline with text-decoration: none.

SASS

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
}

nav {
  background-color: var(--main-bg-color);
  padding: 1rem;

  /* Nest styles for links here */
}

Need a hint?

Use & a inside nav to nest styles for links.

4

Add hover effect to navigation links using native CSS nesting

Inside the nested a rule, add a hover style using &:hover that changes the link color to #f1c40f.

SASS

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
}

nav {
  background-color: var(--main-bg-color);
  padding: 1rem;

  & a {
    color: var(--main-text-color);
    text-decoration: none;

    /* Add hover effect here */
  }
}

Need a hint?

Use &:hover inside the nested a rule to add hover styles.