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);
}