Common SASS list patterns

test.scss

@import "utils";

// _settings.scss

$colors:
    "main"  #ccc
    "red"   #f00,
    "green" #0f0,
    "blue"  #00f,
    "white" #fff,
    "black" #000
;

// utils/_colors

@each $item in $colors {
    $name:  nth($item, 1);
    $value: nth($item, 2);
  
    .color--#{$name} { color: $value; }
}

// components/buttons

.my-button {
    // button styles here
    color: get-color("main");
}

utils.scss

// Simplifed list util functions we use
// ====================================

@function get-color($name) {
    @if type-of($name) == "color" {
        @return $name;
    }

    @return lookup($colors, $name);
}

@function lookup($list, $key, $default:null) {
    @if length($list) == 0 {
        @return $default;
    }

    @for $i from 1 through length($list) {
        $item: nth($list, $i);
        @if nth($item, 1) == $key {
            @return slice($item, 2);
        }
    }

    @return $default;
}

@function slice($list, $from:0, $to:null) {
    $ret: ();

    @if $to == null {
        $to: length($list);
    }

    @for $i from 1 through length($list) {
        @if $i >= $from and $i <= $to {
            $ret: append($ret, nth($list, $i));
        }
    }

    @if length($ret) == 1 {
        $ret: nth($ret, 1);
    }

    @return $ret;
}