Skip to content

Instantly share code, notes, and snippets.

@alexisg
Created March 7, 2016 17:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexisg/dd1d6b45ceb8ba8926e9 to your computer and use it in GitHub Desktop.
Save alexisg/dd1d6b45ceb8ba8926e9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
// color variable map
$colors: (
base: #FFBB00,
light: base (lighten: 15%),
dark: base (darken: 15%),
trans: base (transparentize: 0.5)
);
// retrieve color from $colors map ie. `color(primary, base)`
@function color($color-name) {
// Get value mapped to `$color` in map
$color: map-get($colors, $color-name);
// Get the first item from value (color or ref)
$base: nth($color, 1);
// Get the map of adjustments to perform (or an empty map)
$adjust: if(length($color) > 1, nth($color, 2), ());
// If `$base` is a key from the map, then get it
$color: map-get($colors, $base) or $base;
// Apply the adjustments dynamically
@each $key, $value in $adjust {
$color: call($key, $color, $value...);
}
// Return the new color
@return $color;
}
.foo {
color: color('base');
color: color('light');
color: color('dark');
color: color('trans');
}
.foo {
color: #FFBB00;
color: #ffcf4d;
color: #b38300;
color: rgba(255, 187, 0, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment