Color management with Sass

main.scss

// Color Settings
$color: (
    nav: (
        text: #333,
        text-hover: #FFF,
        bg: #FFF,
        bg-hover: #FEF160
    ),
    site-footer: (
        title: #FFF,
        info-border: rgba(#FFF, 0.1),
        bg: #2A3137
    )
);

// Helper Function
@function color($el, $color, $map: $colors) {
    @return map-get(map-get($map, $el), $color);
}

// Usage
.site-footer {
    background-color: color(site-footer, bg);
}