// SCSS Syntax (.scss)
$primary-color: #333;

.nav {
  background: $primary-color;
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

// Sass Syntax (.sass)
$primary-color: #333

.nav
  background: $primary-color
  ul
    margin: 0
    li
      display: inline-block

// Good: 3 levels, clear structure
.card {
  padding: 1rem;
  
  &__header {
    font-weight: bold;
    
    &:hover {
      color: blue;
    }
  }
  
  @media (min-width: 768px) {
    padding: 2rem;
  }
}

// Bad: Too deep, overly specific
.nav {
  ul {
    li {
      a {
        span {  // 5 levels - avoid!
          color: red;
        }
      }
    }
  }
}

// Pseudo-selectors
.button {
  background: blue;
  
  &:hover { background: darkblue; }
  &:focus { outline: 2px solid blue; }
  &::after { content: '→'; }
}

// BEM Pattern
.card {
  border: 1px solid #ccc;
  
  &__title {
    font-size: 1.5rem;
  }
  
  &--featured {
    border-color: gold;
  }
}

// Context Selector
.sidebar {
  width: 200px;
  
  .mobile & {
    width: 100%;
  }
}

// Compound Classes
.nav-item {
  color: black;
  
  &.active {
    color: blue;
    font-weight: bold;
  }
}

.box {
  font: {
    family: Arial, sans-serif;
    size: 14px;
    weight: 600;
  }
  
  margin: {
    top: 1rem;
    bottom: 1rem;
  }
  
  border: {
    top: 2px solid blue;
    bottom: 1px solid gray;
    radius: 4px;
  }
}

// Output CSS:
// .box {
//   font-family: Arial, sans-serif;
//   font-size: 14px;
//   font-weight: 600;
//   margin-top: 1rem;
//   margin-bottom: 1rem;
//   border-top: 2px solid blue;
//   border-bottom: 1px solid gray;
//   border-radius: 4px;
// }

// This comment won't appear in CSS
// Used for developer notes and explanations

/* This comment will appear in CSS output */
/* Use for section headers and user-facing docs */

/*! 
 * This comment is ALWAYS preserved
 * Copyright 2025 - Company Name
 */

$version: '2.1.0';

/* Project Version: #{$version} */

// =========================
// Component: Navigation Bar
// =========================
.navbar {
  /* Navigation bar styles */
  background: #333;
  
  // TODO: Add responsive breakpoints
  // FIXME: z-index conflict with modal
}

// Compressed output will remove /* */ but keep /*! */

// File structure:
// styles/
//   ├── main.scss          (entry point)
//   ├── _variables.scss    (partial)
//   ├── _mixins.scss       (partial)
//   └── components/
//       ├── _button.scss   (partial)
//       └── _card.scss     (partial)

// main.scss (compiled to main.css)
@import 'variables';
@import 'mixins';
@import 'components/button';
@import 'components/card';

// Modern approach with @use
@use 'variables' as vars;
@use 'mixins' as mx;
@use 'components/button';

// Partial file naming: _variables.scss
// Underscore prevents direct compilation
// Import without underscore or extension
@import 'variables';  // finds _variables.scss

// Color variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;

// Spacing variables
$spacing-unit: 8px;
$margin-base: $spacing-unit * 2;

// Typography
$font-primary: 'Helvetica', sans-serif;
$font-size-base: 16px;

// Usage
.button {
  background: $primary-color;
  color: white;
  font-family: $font-primary;
  margin: $margin-base;
  
  &:hover {
    background: $secondary-color;
  }
}

// Global variable
$color: red;

.component {
  // Local variable (only in this block)
  $local-color: blue;
  color: $local-color;      // blue
  background: $color;       // red (global)
}

.another {
  color: $color;            // red (global accessible)
  // color: $local-color;   // ERROR: undefined
}

// Modifying global from local scope
.modifier {
  $color: green !global;    // Changes global $color
}

.test {
  color: $color;            // green (global was modified)
}

// Shadowing example
$size: 10px;

.shadow {
  $size: 20px;              // Local, shadows global
  font-size: $size;         // 20px (local)
  
  .nested {
    font-size: $size;       // 20px (parent local)
  }
}

.no-shadow {
  font-size: $size;         // 10px (global)
}

$theme: 'dark';
$side: 'left';
$size: 'large';

// Selector interpolation
.button-#{$theme} {
  background: black;
}
// Output: .button-dark { background: black; }

// Property interpolation
.box {
  margin-#{$side}: 20px;
}
// Output: .box { margin-left: 20px; }

// String interpolation
$base-path: '/assets/images';
.icon {
  background: url('#{$base-path}/icon.svg');
}

// Dynamic class generation
@each $sz in small, medium, large {
  .btn-#{$sz} {
    padding: #{$sz};
  }
}

// Media query interpolation
$breakpoint: '(min-width: 768px)';
@media #{$breakpoint} {
  .container { width: 750px; }
}

// Combining variables
$prefix: 'app';
$component: 'header';
.#{$prefix}-#{$component} {
  // .app-header
}

// _library.scss (component library)
$primary-color: blue !default;
$spacing: 8px !default;
$border-radius: 4px !default;

.button {
  background: $primary-color;
  padding: $spacing;
  border-radius: $border-radius;
}

// user-config.scss (user customization)
// Set BEFORE importing library
$primary-color: red;
$spacing: 12px;
// $border-radius not set, will use default

@import 'library';
// Result: red background, 12px padding, 4px radius

// ===================================
// Pattern: Configurable mixin
@mixin button($bg: null, $padding: null) {
  $bg: $bg or $primary-color !default;
  $padding: $padding or $spacing !default;
  
  background: $bg;
  padding: $padding;
}

// Modern module system
// _theme.scss
$color: blue !default;

// main.scss
@use 'theme' with (
  $color: red    // Override default
);

// Numbers
$width: 100;                  // Unitless
$height: 50px;                // With unit
$opacity: 0.75;               // Decimal
$duration: 2s;                // Time unit

// Strings
$font-quoted: "Helvetica";    // Quoted
$font-unquoted: Arial;        // Unquoted
$path: '/assets/images';      // Path string

// Colors
$color-hex: #3498db;
$color-rgb: rgb(52, 152, 219);
$color-rgba: rgba(52, 152, 219, 0.8);
$color-hsl: hsl(204, 70%, 53%);
$color-name: blue;

// Booleans
$is-dark-mode: true;
$is-mobile: false;

// Null
$optional-border: null;       // Won't output

// Lists
$margins: 10px 20px 10px 20px;
$colors: red, green, blue;
$mixed: (1px solid black);

// Maps
$theme: (
  primary: #3498db,
  secondary: #2ecc71,
  text: #333
);

// Usage examples
.box {
  width: $width + px;         // 100px
  border: $optional-border;   // Omitted (null)
  
  @if $is-dark-mode {
    background: black;
  }
}

// SCSS Variables (compile-time)
$primary: #3498db;
$spacing: 16px;

.button {
  background: $primary;        // Compiled to: background: #3498db;
  padding: $spacing;           // Compiled to: padding: 16px;
}

// CSS Custom Properties (runtime)
:root {
  --primary: #3498db;
  --spacing: 16px;
}

.button {
  background: var(--primary);  // Stays in CSS
  padding: var(--spacing);     // Can change at runtime
}

// ===================================
// Combining Both (Best Practice)
$default-primary: #3498db;

:root {
  --primary: #{$default-primary};  // SCSS sets initial value
  --spacing: 16px;
}

.button {
  background: var(--primary);
  
  // JavaScript can change:
  // element.style.setProperty('--primary', 'red');
}

// ===================================
// Theme switching with CSS variables
.theme-light {
  --bg: white;
  --text: black;
}

.theme-dark {
  --bg: black;
  --text: white;
}

.component {
  background: var(--bg);
  color: var(--text);
  // Theme switches without recompiling!
}

// SCSS variables for theme
$themes: (
  light: (bg: white, text: black),
  dark: (bg: black, text: white)
);

@each $theme, $colors in $themes {
  .theme-#{$theme} {
    --bg: #{map-get($colors, bg)};
    --text: #{map-get($colors, text)};
  }
}

// Space-separated (like margin values)
$margins: 10px 20px 10px 20px;

// Comma-separated (like font stack)
$fonts: Arial, Helvetica, sans-serif;

// Explicit parentheses
$sizes: (small, medium, large);

// Single-item list (needs trailing comma)
$single: (blue,);

// Empty list
$empty: ();

// Nested lists (matrix-like)
$grid: (1 2 3) (4 5 6) (7 8 9);

// Mixed separators (outer: space, inner: comma)
$complex: (a, b) (c, d) (e, f);

// List in variable
$colors: red blue green;
$first: nth($colors, 1);  // red
$length: length($colors);  // 3

$colors: red, green, blue, yellow;

// nth - Get item by index (1-based)
$first: nth($colors, 1);        // red
$last: nth($colors, -1);        // yellow (negative index)

// length - Count items
$count: length($colors);         // 4

// append - Add to end
$extended: append($colors, purple);
// → red, green, blue, yellow, purple

// append with separator
$spaced: append((a b), c, space);  // a b c
$comma: append((a b), c, comma);   // a, b, c

// join - Combine lists
$list1: (a, b);
$list2: (c, d);
$joined: join($list1, $list2);   // a, b, c, d

// index - Find position
$pos: index($colors, blue);      // 3
$not-found: index($colors, pink); // null

// set-nth - Replace item
$modified: set-nth($colors, 2, orange);
// → red, orange, blue, yellow

// zip - Combine into pairs
$names: (a, b, c);
$nums: (1, 2, 3);
$pairs: zip($names, $nums);
// → (a 1), (b 2), (c 3)

// Practical: Generate classes
$sizes: small, medium, large;
@each $size in $sizes {
  .text-#{$size} {
    font-size: nth((12px, 16px, 20px), index($sizes, $size));
  }
}

// Basic map
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// Nested map (theme system)
$theme: (
  colors: (
    text: #333,
    bg: #fff,
    accent: blue
  ),
  spacing: (
    small: 8px,
    medium: 16px,
    large: 24px
  ),
  fonts: (
    heading: 'Georgia',
    body: 'Arial'
  )
);

// Numeric keys
$breakpoints: (
  320: 'mobile',
  768: 'tablet',
  1024: 'desktop'
);

// Mixed value types
$config: (
  enabled: true,
  count: 5,
  color: red,
  sizes: (10px, 20px, 30px),
  nested: (
    deep: value
  )
);

// Empty map
$empty: ();

// Single entry (still needs parentheses)
$single: (key: value);

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f39c12
);

// map-get - Retrieve value
$primary: map-get($colors, primary);  // #3498db

// map-has-key - Check existence
@if map-has-key($colors, primary) {
  .btn { background: map-get($colors, primary); }
}

// map-keys - Get all keys
$color-names: map-keys($colors);
// → primary, secondary, danger, warning

// map-values - Get all values
$color-values: map-values($colors);
// → #3498db, #2ecc71, #e74c3c, #f39c12

// map-merge - Combine maps
$new-colors: (success: green, info: blue);
$all-colors: map-merge($colors, $new-colors);
// Adds success and info to existing colors

// map-remove - Delete keys
$subset: map-remove($colors, danger, warning);
// → (primary: #3498db, secondary: #2ecc71)

// ===================================
// Practical: Generate utility classes
@each $name, $color in $colors {
  .bg-#{$name} {
    background: $color;
  }
  .text-#{$name} {
    color: $color;
  }
}

// ===================================
// Modern sass:map module
@use 'sass:map';

$theme: (
  colors: (
    primary: (
      base: blue,
      light: lightblue
    )
  )
);

// Deep get (nested access)
$base-color: map.get($theme, 'colors', 'primary', 'base');
// → blue

// Deep merge
$theme2: (
  colors: (
    primary: (
      dark: darkblue
    )
  )
);
$merged: map.deep-merge($theme, $theme2);
// Recursively merges nested maps

// 2D List (Matrix)
$grid: (
  (1, 2, 3),
  (4, 5, 6),
  (7, 8, 9)
);

// Access: row 2, column 3
$row: nth($grid, 2);        // (4, 5, 6)
$value: nth($row, 3);       // 6

// Nested Maps (Theme System)
$theme: (
  colors: (
    primary: (
      base: #3498db,
      light: #5dade2,
      dark: #2874a6
    ),
    secondary: (
      base: #2ecc71,
      light: #58d68d,
      dark: #229954
    )
  ),
  spacing: (
    small: 8px,
    medium: 16px,
    large: 24px
  )
);

// Deep access
$colors: map-get($theme, colors);
$primary: map-get($colors, primary);
$base: map-get($primary, base);  // #3498db

// Map of Lists (Breakpoint ranges)
$breakpoints: (
  mobile: (320px, 767px),
  tablet: (768px, 1023px),
  desktop: (1024px, 1439px),
  wide: (1440px, null)
);

$tablet-range: map-get($breakpoints, tablet);
$min: nth($tablet-range, 1);  // 768px
$max: nth($tablet-range, 2);  // 1023px

// List of Maps (Menu items)
$menu: (
  (label: 'Home', url: '/', icon: 'house'),
  (label: 'About', url: '/about', icon: 'info'),
  (label: 'Contact', url: '/contact', icon: 'mail')
);

@each $item in $menu {
  $label: map-get($item, label);
  $url: map-get($item, url);
  
  .nav-#{to-lower-case($label)} {
    content: $label;
  }
}

// ===================================
// Helper function for deep access
@function deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

// Usage
$color: deep-get($theme, colors, primary, base);
// → #3498db

// Simple list iteration
$sizes: small, medium, large;

@each $size in $sizes {
  .text-#{$size} {
    font-size: $size;
  }
}

// List with index
$colors: red, green, blue;

@for $i from 1 through length($colors) {
  .color-#{$i} {
    color: nth($colors, $i);
    z-index: $i;
  }
}

// Map iteration (key-value)
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .container-#{$name} {
      max-width: $width;
    }
  }
}

// Nested list iteration
$grid: (
  (1, 2, 3),
  (4, 5, 6),
  (7, 8, 9)
);

@each $row in $grid {
  @each $cell in $row {
    .cell-#{$cell} {
      order: $cell;
    }
  }
}

// List destructuring (paired values)
$pairs: (10px 1), (20px 2), (30px 3);

@each $size, $weight in $pairs {
  .combo-#{$weight} {
    font-size: $size;
    font-weight: $weight * 100;
  }
}

// Map keys iteration
@each $name in map-keys($breakpoints) {
  .visible-#{$name} {
    display: none;
    
    @media (min-width: map-get($breakpoints, $name)) {
      display: block;
    }
  }
}

// Complex: List of maps
$buttons: (
  (variant: primary, color: blue, text: white),
  (variant: secondary, color: gray, text: black),
  (variant: danger, color: red, text: white)
);

@each $btn in $buttons {
  .btn-#{map-get($btn, variant)} {
    background: map-get($btn, color);
    color: map-get($btn, text);
  }
}

// Practical: Generate utility classes
$spacings: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

$sides: (
  t: top,
  r: right,
  b: bottom,
  l: left
);

@each $size-key, $size-val in $spacings {
  @each $side-key, $side-val in $sides {
    .m#{$side-key}-#{$size-key} {
      margin-#{$side-val}: $size-val;
    }
    .p#{$side-key}-#{$size-key} {
      padding-#{$side-val}: $size-val;
    }
  }
}
// Generates: mt-0, mt-1, mr-0, mr-1, pt-0, etc.

// Basic mixin without arguments
@mixin reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// Mixin with single argument
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// Mixin with multiple arguments
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
}

// Mixin with default parameters
@mixin button($bg: blue, $color: white, $padding: 10px 20px) {
  background: $bg;
  color: $color;
  padding: $padding;
  border: none;
  cursor: pointer;
}

// Mixin accessing outer variables
$base-font-size: 16px;

@mixin responsive-font($multiplier) {
  font-size: $base-font-size * $multiplier;
}

// Complex mixin
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// Define mixins
@mixin reset {
  margin: 0;
  padding: 0;
}

@mixin button($bg, $color, $size: medium) {
  background: $bg;
  color: $color;
  padding: if($size == small, 5px 10px, 
           if($size == medium, 10px 20px, 15px 30px));
}

// Basic inclusion
.box {
  @include reset;
  width: 100%;
}

// With positional arguments
.primary-btn {
  @include button(blue, white);
}

// With named arguments (any order)
.secondary-btn {
  @include button($color: black, $bg: gray, $size: large);
}

// Mixed positional and named
.danger-btn {
  @include button(red, white, $size: small);
}

// Multiple includes in one selector
.card {
  @include reset;
  @include border-radius(8px);
  @include box-shadow(0, 2px, 4px, rgba(0,0,0,0.1));
}

// Nested within media query
.responsive {
  width: 100%;
  
  @media (min-width: 768px) {
    @include flex-center(column);
  }
}

// Include within mixin (composition)
@mixin fancy-button {
  @include button(blue, white);
  @include border-radius(20px);
  text-transform: uppercase;
}

// All optional with defaults
@mixin padding($top: 10px, $right: 10px, $bottom: 10px, $left: 10px) {
  padding: $top $right $bottom $left;
}

// Usage variations
.box1 { @include padding; }  // Uses all defaults
.box2 { @include padding(20px); }  // Override first only
.box3 { @include padding($bottom: 30px); }  // Named override

// Mixed required and optional
@mixin button($text, $bg: blue, $color: white) {
  content: $text;
  background: $bg;
  color: $color;
}

.btn { @include button('Click Me'); }  // Required provided
.btn2 { @include button('Submit', green); }  // Override one optional

// Null default for conditional properties
@mixin border($width: 1px, $style: solid, $color: null) {
  border-width: $width;
  border-style: $style;
  
  @if $color != null {
    border-color: $color;
  }
}

.element {
  @include border;  // No color set
}

.element2 {
  @include border($color: red);  // Color explicitly set
}

// Expression as default
$base-size: 16px;

@mixin font($size: $base-size * 1.5, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

// Complex default with function
@mixin box-size($width, $height: $width) {
  width: $width;
  height: $height;  // Defaults to same as width (square)
}

.square { @include box-size(100px); }  // 100px × 100px
.rect { @include box-size(100px, 50px); }  // 100px × 50px

// Boolean defaults
@mixin text($uppercase: false, $bold: false) {
  @if $uppercase {
    text-transform: uppercase;
  }
  @if $bold {
    font-weight: bold;
  }
}

.normal { @include text; }
.shouting { @include text($uppercase: true, $bold: true); }

// Accept any number of arguments
@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
}

// Usage with multiple shadows
.card {
  @include box-shadow(
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1)
  );
}

// Required argument + rest
@mixin transition($property, $rest...) {
  transition: $property $rest;
}

.button {
  @include transition(background, 0.3s, ease-in-out);
  // → transition: background 0.3s ease-in-out;
}

// Spread list into arguments
@mixin margin($top, $right, $bottom, $left) {
  margin: $top $right $bottom $left;
}

$spacing: 10px 20px 10px 20px;
.box {
  @include margin($spacing...);
  // Unpacks list: margin(10px, 20px, 10px, 20px)
}

// Spread map as named arguments
@mixin button($bg, $color, $padding) {
  background: $bg;
  color: $color;
  padding: $padding;
}

$btn-config: (
  bg: blue,
  color: white,
  padding: 10px 20px
);

.btn {
  @include button($btn-config...);
  // Maps to named parameters
}

// Iterate over variadic arguments
@mixin generate-classes($prefix, $values...) {
  @each $value in $values {
    .#{$prefix}-#{$value} {
      #{$prefix}: $value;
    }
  }
}

@include generate-classes(color, red, green, blue);
// Generates: .color-red, .color-green, .color-blue

// Combined regular and variadic
@mixin flex($direction, $rest...) {
  display: flex;
  flex-direction: $direction;
  
  @if length($rest) > 0 {
    justify-content: nth($rest, 1);
  }
  @if length($rest) > 1 {
    align-items: nth($rest, 2);
  }
}

.container {
  @include flex(row, center, center);
}

// Advanced: keyword arguments
@mixin advanced($args...) {
  $named: keywords($args);
  // $named is a map of named arguments
  
  @if map-has-key($named, color) {
    color: map-get($named, color);
  }
}

// Basic content injection
@mixin media-query($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Usage
.sidebar {
  width: 100%;
  
  @include media-query(768px) {
    width: 300px;
    float: left;
  }
}

// Output:
// .sidebar { width: 100%; }
// @media (min-width: 768px) {
//   .sidebar { width: 300px; float: left; }
// }

// Wrapper mixin with @content
@mixin hover-focus {
  &:hover,
  &:focus {
    @content;
  }
}

.button {
  background: blue;
  
  @include hover-focus {
    background: darkblue;
    transform: scale(1.05);
  }
}

// Multiple @content (same content injected twice)
@mixin vendor-prefix {
  -webkit-@content;
  -moz-@content;
  @content;
}

// Advanced: Content with arguments (Sass 3.5+)
@mixin context($name) {
  .#{$name} {
    @content($name);
  }
}

@include context('header') using ($ctx) {
  background: #{$ctx}-color;  // header-color
}

// Media query mixin library
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@mixin respond-to($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  
  @media (min-width: $value) {
    @content;
  }
}

.container {
  padding: 1rem;
  
  @include respond-to(md) {
    padding: 2rem;
  }
  
  @include respond-to(lg) {
    padding: 3rem;
  }
}

// Pseudo-selector wrapper
@mixin pseudo($pseudo) {
  &:#{$pseudo} {
    @content;
  }
}

a {
  color: blue;
  
  @include pseudo(hover) {
    color: red;
  }
  
  @include pseudo(visited) {
    color: purple;
  }
}

// Context-based styling
@mixin when-inside($selector) {
  #{$selector} & {
    @content;
  }
}

.button {
  background: white;
  
  @include when-inside('.dark-theme') {
    background: black;
    color: white;
  }
}
// Output: .dark-theme .button { background: black; color: white; }

// Keyframe wrapper
@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

@include keyframes(fade-in) {
  from { opacity: 0; }
  to { opacity: 1; }
}

// Utility generator mixin
@mixin generate-spacing-utilities($property, $sides, $sizes) {
  @each $side-key, $side-value in $sides {
    @each $size-key, $size-value in $sizes {
      .#{$property}#{$side-key}-#{$size-key} {
        #{$property}-#{$side-value}: $size-value;
      }
    }
  }
}

// Usage
$sides: (t: top, r: right, b: bottom, l: left);
$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem);

@include generate-spacing-utilities(margin, $sides, $sizes);
@include generate-spacing-utilities(padding, $sides, $sizes);
// Generates: mt-0, mt-1, mr-0, pt-0, etc.

// Conditional responsive mixin
@mixin responsive-font($min, $max, $min-vw: 320px, $max-vw: 1200px) {
  font-size: $min;
  
  @media (min-width: $min-vw) {
    font-size: calc(#{$min} + (#{$max} - #{$min}) * 
                    ((100vw - #{$min-vw}) / (#{$max-vw} - #{$min-vw})));
  }
  
  @media (min-width: $max-vw) {
    font-size: $max;
  }
}

// Mixin composition (building blocks)
@mixin reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin card-base {
  @include reset;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
}

@mixin card-hoverable {
  @include card-base;
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

// Map-driven button system
$button-variants: (
  primary: (bg: #007bff, color: white, hover-bg: #0056b3),
  secondary: (bg: #6c757d, color: white, hover-bg: #545b62),
  success: (bg: #28a745, color: white, hover-bg: #1e7e34),
  danger: (bg: #dc3545, color: white, hover-bg: #bd2130)
);

@mixin button-variant($variant) {
  $config: map-get($button-variants, $variant);
  
  background: map-get($config, bg);
  color: map-get($config, color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  
  &:hover {
    background: map-get($config, hover-bg);
  }
}

// Generate all button variants
@each $name, $config in $button-variants {
  .btn-#{$name} {
    @include button-variant($name);
  }
}

// BEM generator mixin
@mixin bem-block($block) {
  .#{$block} {
    @content;
  }
}

@mixin bem-element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin bem-modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Usage
@include bem-block('card') {
  border: 1px solid gray;
  
  @include bem-element('header') {
    font-weight: bold;
  }
  
  @include bem-element('body') {
    padding: 1rem;
  }
  
  @include bem-modifier('featured') {
    border-color: gold;
  }
}

// Advanced: Breakpoint mixin library
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@mixin media-up($name) {
  $min: map-get($breakpoints, $name);
  @media (min-width: $min) {
    @content;
  }
}

@mixin media-down($name) {
  $max: map-get($breakpoints, $name) - 1px;
  @media (max-width: $max) {
    @content;
  }
}

@mixin media-between($lower, $upper) {
  $min: map-get($breakpoints, $lower);
  $max: map-get($breakpoints, $upper) - 1px;
  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

// Simple calculation function
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

// Usage
$value: strip-unit(16px);  // Returns: 16

// Function with multiple parameters
@function calculate-rem($size, $base: 16px) {
  $rem: $size / $base;
  @return #{$rem}rem;
}

// Usage
font-size: calculate-rem(24px);       // 1.5rem
font-size: calculate-rem(20px, 10px); // 2rem

// Conditional return
@function contrast-color($color) {
  @if (lightness($color) > 50%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

.button {
  background: #3498db;
  color: contrast-color(#3498db);  // Returns: #fff
}

// Variadic arguments
@function sum($numbers...) {
  $total: 0;
  @each $num in $numbers {
    $total: $total + $num;
  }
  @return $total;
}

$result: sum(1, 2, 3, 4, 5);  // 15

// Named arguments for clarity
@function responsive-size(
  $min-size,
  $max-size,
  $min-viewport: 320px,
  $max-viewport: 1200px
) {
  $slope: ($max-size - $min-size) / ($max-viewport - $min-viewport);
  $intercept: $min-size - $slope * $min-viewport;
  @return calc(#{$intercept} + #{$slope * 100vw});
}

// Call with named args
font-size: responsive-size(
  $min-size: 14px,
  $max-size: 18px
);

// Guard clauses with early return
@function safe-divide($dividend, $divisor) {
  @if $divisor == 0 {
    @warn "Cannot divide by zero";
    @return null;
  }
  @return $dividend / $divisor;
}

// Return different types
@function get-spacing($key) {
  $spacing: (small: 8px, medium: 16px, large: 24px);
  
  @if map-has-key($spacing, $key) {
    @return map-get($spacing, $key);  // Returns number
  }
  @return null;  // Returns null if not found
}