Skip to content

Instantly share code, notes, and snippets.

@Jezfx
Last active September 19, 2017 13:22
Show Gist options
  • Save Jezfx/43aed21251dc72c0cf21474a31837f2d to your computer and use it in GitHub Desktop.
Save Jezfx/43aed21251dc72c0cf21474a31837f2d to your computer and use it in GitHub Desktop.
colour map system
// a good way to get by having `.grey-light` `.grey-lighter` variable names
$colour-map-grey: (
1000: hsl(0, 0%, 10%), // #1A1A1A
1500: hsl(0, 0%, 14%), // #232323
2000: hsl(0, 0%, 20%), // #333333
2500: hsl(0, 0%, 33%), // #545454
3000: hsl(0, 0%, 40%), // #6e6e6e
5000: hsl(0, 0%, 80%), // #cccccc
7000: hsl(0, 0%, 96%), // #eeeeee
);
.u-background--1000 { background: map-get($colour-map-grey, 1000) !important; }
.u-background--1500 { background: map-get($colour-map-grey, 1500) !important; }
.u-colour--1000 { color: map-get($colour-map-grey, 1000) !important; }
.u-colour--1500 { color: map-get($colour-map-grey, 1500) !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment