amy-d
3/23/2017 - 3:53 PM

Creating a color scheme

Creating a color scheme

.element {
    color: #ab906b;
}
.element--light {
    color: #ecdac3;
}
.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}
// 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);
}