SCSS Maps and Lists in Depth

// Different ways to create lists
$space-separated: 1rem 2rem 3rem 4rem;
$comma-separated: (1rem, 2rem, 3rem, 4rem);
$mixed-list: 1rem 2rem, 3rem 4rem;
$nested-list: 1rem (2rem 3rem) 4rem;

.element {
    // Accessing list items (1-based index)
    padding: nth($space-separated, 2);  // 2rem
    margin: nth($comma-separated, 3);   // 3rem
    
    // Length function
    --total-items: length($space-separated);  // 4
    
    // Index function
    $position: index($space-separated, 3rem);  // 3
}

// List manipulation functions
$base-list: 1rem 2rem 3rem;

.element {
    // Append
    $extended: append($base-list, 4rem);  // 1rem 2rem 3rem 4rem
    
    // Join
    $combined: join($base-list, 5rem 6rem);  // 1rem 2rem 3rem 5rem 6rem
    
    // Zip - combines lists
    $properties: width height;
    $values: 100px 200px;
    $zipped: zip($properties, $values);  // (width 100px) (height 200px)
    
    // Set nth - replace value at position
    $modified: set-nth($base-list, 2, 2.5rem);  // 1rem 2.5rem 3rem
}

$sizes: 1rem 2rem 3rem 4rem;
$colors: red blue green;

// Each loop with list
@each $size in $sizes {
    .margin-#{$size} {
        margin: $size;
    }
}

// Multiple lists in each loop
@each $size, $color in zip($sizes, $colors) {
    .box-#{$color} {
        width: $size;
        background: $color;
    }
}

// Basic map structure
$theme-colors: (
    "primary": #007bff,
    "secondary": #6c757d,
    "success": #28a745,
    "danger": #dc3545
);

// Nested maps
$breakpoints: (
    "mobile": (
        "small": 320px,
        "medium": 375px,
        "large": 425px
    ),
    "tablet": (
        "small": 768px,
        "large": 1024px
    ),
    "desktop": (
        "small": 1200px,
        "large": 1440px
    )
);

// Accessing map values
.element {
    // Single level access
    color: map-get($theme-colors, "primary");
    
    // Nested map access
    @media (min-width: map-get(map-get($breakpoints, "tablet"), "small")) {
        // Styles for tablet and up
    }
}

// Map manipulation
$theme-colors: (
    "primary": #007bff,
    "secondary": #6c757d
);

// Check if key exists
@if map-has-key($theme-colors, "primary") {
    // Use the value
}

// Get all keys
$color-names: map-keys($theme-colors);  // "primary", "secondary"

// Get all values
$color-values: map-values($theme-colors);  // #007bff, #6c757d

// Merge maps
$additional-colors: (
    "success": #28a745,
    "danger": #dc3545
);
$all-colors: map-merge($theme-colors, $additional-colors);

// Remove key
$without-secondary: map-remove($theme-colors, "secondary");

// Theme system with maps
$themes: (
    "light": (
        "background": #ffffff,
        "text": #000000,
        "border": #dddddd
    ),
    "dark": (
        "background": #1a1a1a,
        "text": #ffffff,
        "border": #333333
    )
);

// Theme mixin
@mixin themed() {
    @each $theme, $map in $themes {
        .theme--#{$theme} & {
            @content($map);
        }
    }
}

// Usage
.card {
    @include themed() using ($theme) {
        background: map-get($theme, "background");
        color: map-get($theme, "text");
        border: 1px solid map-get($theme, "border");
    }
}

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

// Mixin for media queries
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    } @else {
        @warn "Unknown breakpoint: #{$breakpoint}";
    }
}

// Usage
.container {
    width: 100%;
    
    @include respond-to("md") {
        width: 720px;
    }
    
    @include respond-to("lg") {
        width: 960px;
    }
}

// Generate utility classes
$spacings: (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem);
$directions: (top, right, bottom, left);
$properties: (
    "m": margin,
    "p": padding
);

@each $prop-key, $prop in $properties {
    @each $direction in $directions {
        $dir-short: str-slice($direction, 0, 1);
        
        @each $space in $spacings {
            $index: index($spacings, $space);
            
            .#{$prop-key}#{$dir-short}-#{$index} {
                #{$prop}-#{$direction}: $space;
            }
        }
    }
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
// ... and so on