Creating a color scheme

_colors.scss

// Scheme of colors
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
);


// Our function for shorter usage of map-get();
@function setcolor($scheme, $tone: base) {
    @return map-get(map-get($colorscheme, $scheme), $tone);
}

_implementation.scss

.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}

output.css

.element {
    color: #ab906b;
}
.element--light {
    color: #ecdac3;
}