Skip to content

Instantly share code, notes, and snippets.

@Undistraction
Last active August 29, 2015 14:09
Show Gist options
  • Save Undistraction/b9c38f4c231e5d230ce6 to your computer and use it in GitHub Desktop.
Save Undistraction/b9c38f4c231e5d230ce6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Sassy Maps (v0.4.0)
// ----
@import "sassy-maps";
$palette-map: (
blue: #003DFF,
red: (
darkest: #4D0F10,
darker: #870300,
dark: #B70404,
base: #FF0000,
light: #FF3939,
lighter: #FF6161,
lightest: #FFA6A6
),
yellow: (
darkest: #4D0F10,
darker: #870300,
dark: #B70404,
base: #FF0000,
light: #FF3939,
lighter: #FF6161,
lightest: #FFA6A6
),
green: (
darkest: #4D0F10,
darker: #870300,
dark: #B70404,
base: #FF0000,
light: #FF3939,
lighter: #FF6161,
lightest: #FFA6A6
)
);
@function palette($path...) {
$list: $path;
@if length($list) == 1 {
$root-value: map-get($palette-map, $list...);
@if type-of($root-value) == Map {
$list: append($list, base);
}@else{
@return $root-value;
}
}
$value: map-get-deep($palette-map, $list);
@if $value {
@return $value;
} @else {
@error "Palette value at path: `#{$list}` didn't exist in map `#{inspect($palette-map)}`";
}
@error $value;
}
@function p($path...) {
@return palette($path...)
}
$category-color-alpha: red;
$category-color-beta: green, darkest;
//-------------------------------------------------------------------------------
.Box--base {
color: p(red, base);
}
.Box--implicit-base {
color: p(blue);
}
.Box--path {
color: p(red, darkest);
}
.Box--semantic {
color: p($category-color-beta...);
}
.Box--base {
color: #FF0000;
}
.Box--implicit-base {
color: #003DFF;
}
.Box--path {
color: #4D0F10;
}
.Box--semantic {
color: #4D0F10;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment