Lists

@@use 'sass:list';
@@use 'sass:math';

/* 1) Create */
$sizes: 0.5rem, 1rem, 1.5rem, 2rem, 3rem;       // comma-separated
$padding: 10px 20px;                              // space-separated
$brands: 'sky' #0ea5e9, 'rose' #e11d48, 'emerald' #10b981;

/* 2) Access */
list.nth($sizes, 1)                                // 0.5rem (Sass is 1-indexed!)
list.nth($sizes, 3)                                // 1.5rem
list.nth($sizes, -1)                               // 3rem  (last)

list.length($sizes)                                // 5
list.index($sizes, 1rem)                           // 2     (false if not found)

list.separator($sizes)                             // comma
list.separator($padding)                           // space

/* 3) Iterate */
@@each $size in $sizes {
    $i: list.index($sizes, $size);
    .gap-#{$i - 1} { gap: $size; }
}
/* → .gap-0 { gap: 0.5rem; }  .gap-1 { gap: 1rem; }  … */

/* 4) Nested lists with destructuring */
$breakpoints: ('sm' 640px, 'md' 768px, 'lg' 1024px, 'xl' 1280px);

@@each $bp in $breakpoints {
    $name:  list.nth($bp, 1);
    $width: list.nth($bp, 2);

    @@media (min-width: $width) {
        .#{$name}\\:hidden { display: none; }
        .#{$name}\\:block  { display: block; }
    }
}

/* 5) Brand palette generation */
$brands:
    'sky'     #0ea5e9,
    'rose'    #e11d48,
    'emerald' #10b981,
    'amber'   #f59e0b;

@@each $brand in $brands {
    $name:  list.nth($brand, 1);
    $color: list.nth($brand, 2);

    .bg-#{$name}     { background: $color; }
    .text-#{$name}   { color:      $color; }
    .border-#{$name} { border: 1px solid $color; }
}

/* 6) Modify — append, join, slash */
list.append($sizes, 4rem)                          // 0.5, 1, 1.5, 2, 3, 4
list.append($sizes, 4rem, comma)                   // force comma separator
list.join((1, 2), (3, 4))                           // 1, 2, 3, 4
list.join((1px 2px), (3px 4px), space)              // 1px 2px 3px 4px

/* 7) Slash-separated lists (CSS shorthand syntax: 16px/1.4 sans-serif) */
list.slash(2, 1)                                    // 2 / 1

/* 8) Number lists for spacing scale */
$scale: 0 4 8 12 16 24 32 48 64 96;

@@for $i from 1 through list.length($scale) {
    $val: list.nth($scale, $i);
    .m-#{$val} { margin: #{$val}px; }
    .p-#{$val} { padding: #{$val}px; }
}

/* 9) Combine list + map for complex tokens */
@@use 'sass:map';
$tokens: (
    'color': ('primary' #0ea5e9, 'success' #10b981, 'danger' #e11d48),
    'space': (0.25rem 0.5rem 1rem 1.5rem 2rem 4rem),
);

@@each $entry in map.get($tokens, 'color') {
    $name:  list.nth($entry, 1);
    $value: list.nth($entry, 2);
    .text-#{$name} { color: $value; }
}

/* 10) Type scale via list */
$type-scale: ('xs' 0.75rem, 'sm' 0.875rem, 'base' 1rem, 'lg' 1.125rem, 'xl' 1.25rem, '2xl' 1.5rem, '3xl' 1.875rem, '4xl' 2.25rem);

@@each $step in $type-scale {
    .text-#{list.nth($step, 1)} { font-size: list.nth($step, 2); }
}

/* 11) Reverse a list (no built-in; helper) */
@@function reverse($list) {
    $out: ();
    @@for $i from list.length($list) through 1 {
        $out: list.append($out, list.nth($list, $i));
    }
    @@return $out;
}

/* 12) Contains? — use list.index() */
@@function contains($list, $value) {
    @@return list.index($list, $value) != null;
}

.icon {
    @@if contains(('warning' 'error' 'critical'), $severity) {
        color: red;
    }
}

/* 13) Sass lists vs CSS lists */
/* Sass:  4 8 12 16     (or 4, 8, 12, 16) — Sass type 'list' */
/* CSS:   1px solid red — CSS-syntactic shorthand, also a list to Sass */
/* Sass parses CSS shorthand as lists — useful for splitting / inspecting */

@@function get-border-color($border) {
    @@return list.nth($border, 3);
}
.foo {
    color: get-border-color(1px solid #f00);   // #f00
}

/* 14) Best practices */
/*   • Use lists for ordered data — spacing scales, type ramps, breakpoints */
/*   • Use maps when keys / lookups matter — design tokens, brand palette by name */
/*   • Lists are 1-INDEXED — common bug for JS/Python devs */
/*   • Reach for sass:list functions instead of writing manual loops where possible */
/*   • Combine with @@for and @@each for compile-time iteration */

/* 15) Modern alternative — CSS custom properties */
/* For runtime-themable tokens, you may want CSS variables: */
/* :root { --space-1: 4px; --space-2: 8px; ... } */
/* Sass lists generate them once at build; CSS vars allow runtime overrides. */

$colors: red green blue;
@each $c in $colors { .text-\#{$c} { color: $c; } }