Managing Complex Design Systems with Sass Maps in Next.js

Illustrate the use of Sass maps to manage complex design systems in Next.js, showcasing how to define and iterate over maps for consistent styling across components.

// styles/_colors.scss
$colors: (
  'primary': #5b3cc4,
  'secondary': #ffb821,
  'background': #f8f9fa
);

@mixin apply-colors {
  @each $name, $color in $colors {
    .#{$name} {
      color: $color;
    }
  }
}

This Sass snippet defines a map of colors and a mixin that iterates over the map to output color styles for each map entry. This will be part of the global style definitions.

// pages/index.js
import React from 'react';
import '../styles/globals.scss';  // Assuming _colors.scss is imported within this

export default function Home() {
  return (
    <div>
      <h1 className='primary'>Primary Heading</h1>
      <p className='secondary'>This is a secondary text</p>
      <div className='background'>Background styled div</div>
    </div>
  );
}

In this React component, we're importing the global styles and using the class names generated by the Sass mixin to apply our design system's colors.