Skip to content

Instantly share code, notes, and snippets.

@inlikealion
Created February 12, 2014 18:53
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save inlikealion/8962036 to your computer and use it in GitHub Desktop.
Save inlikealion/8962036 to your computer and use it in GitHub Desktop.
Sass color palette function from Erskine:
// http://codepen.io/erskine/pen/wLclB
// config
$_color-base-grey: rgb(229,231,234);
$palettes: (
purple: (
base: rgb(42,40,80),
light: rgb(51,46,140),
dark: rgb(40,38,65)
),
grey: (
base: $_color-base-grey,
light: lighten($_color-base-grey, 10%),
dark: darken($_color-base-grey, 10%)
)
);
// Palette function,
@function palette($palette, $tone: 'base') {
@return map-get(map-get($palettes, $palette), $tone);
}
// in module styles
a {
color: palette(purple);
&:hover {
color: palette(purple, light);
}
}
// Config
// via http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
// color vars
$_color-base-gray: rgb(85,85,85);
// palette function
$palettes: (
gray: (
base: $_color-base-gray,
light: lighten($_color-base-gray, 10%),
dark: darken($_color-base-gray, 10%)
)
);
// palette function
@function palette($palette, $tone: 'base') {
@return map-get(map-get($palettes, $palette), $tone);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment