Skip to content

Instantly share code, notes, and snippets.

@una
Last active February 4, 2016 05:26
Show Gist options
  • Save una/e50240502a77bb33ba82 to your computer and use it in GitHub Desktop.
Save una/e50240502a77bb33ba82 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// initial map
$colors: (
'red': (
'base': #f00
),
'yellow' : (
'base': #ff0
)
);
// Map Deep Set by Hugo Giraudel
// link: http://www.sitepoint.com/extra-map-functions-sass/
@function map-deep-set($map, $keys.../*, $value */) {
$map-list: ($map,);
$result: null;
@if length($keys) == 2 {
@return map-merge($map, (nth($keys, 1): nth($keys, -1)));
}
@for $i from 1 through length($keys) - 2 {
$map-list: append($map-list, map-get(nth($map-list, -1), nth($keys, $i)));
}
@for $i from length($map-list) through 1 {
$result: map-merge(nth($map-list, $i), (nth($keys, $i): if($i == length($map-list), nth($keys, -1), $result)));
}
@return $result;
}
// Hugo's Deep Set
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// debug map
@mixin debug-map($map) {
@at-root {
@debug-map {
__toString__: inspect($map);
__length__: length($map);
__depth__: depth($map);
__keys__: map-keys($map);
__properties__ {
@each $key, $value in $map {
#{'(' + type-of($value) + ') ' + $key}: inspect($value);
}
}
}
}
}
// setting the color tints
@each $color, $color-val in $colors {
// going by 10% color intervals for the tint here:
@for $tint from 1 through 10 {
$new-val: mix(white, map-deep-get($colors, $color, 'base'), $tint * 10%);
// set map
$colors: map-deep-set($colors, #{$color}, '#{$tint}', #{$new-val});
}
}
@include debug-map($colors);
// color function
@function color($base-hue, $tone: 'base') {
@return rgba(map-get(map-get($colors, $base-hue), $tone));
}
@each $color, $color-val in $colors {
@for $tint from 1 through 10 {
.#{$color}--tint--#{$tint} {
content: 'color: ';
color: color('red', '3');
}
}
}
@debug-map {
__toString__: ("red": ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white), "yellow": ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white));
__length__: 2;
__depth__: depth(("red": ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white), "yellow": ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white)));
__keys__: "red", "yellow";
__properties__ {
(map) red: ("base": #f00, "tint--1": #ff1a1a, "tint--2": #ff3333, "tint--3": #ff4d4d, "tint--4": #ff6666, "tint--5": #ff8080, "tint--6": #ff9999, "tint--7": #ffb3b3, "tint--8": #ffcccc, "tint--9": #ffe6e6, "tint--10": white);
(map) yellow: ("base": #ff0, "tint--1": #ffff1a, "tint--2": #ffff33, "tint--3": #ffff4d, "tint--4": #ffff66, "tint--5": #ffff80, "tint--6": #ffff99, "tint--7": #ffffb3, "tint--8": #ffffcc, "tint--9": #ffffe6, "tint--10": white);
}
}
.red--tint--1 {
content: 'color: ';
color: map;
}
.red--tint--2 {
content: 'color: ';
color: map;
}
.red--tint--3 {
content: 'color: ';
color: map;
}
.red--tint--4 {
content: 'color: ';
color: map;
}
.red--tint--5 {
content: 'color: ';
color: map;
}
.red--tint--6 {
content: 'color: ';
color: map;
}
.red--tint--7 {
content: 'color: ';
color: map;
}
.red--tint--8 {
content: 'color: ';
color: map;
}
.red--tint--9 {
content: 'color: ';
color: map;
}
.red--tint--10 {
content: 'color: ';
color: map;
}
.yellow--tint--1 {
content: 'color: ';
color: map;
}
.yellow--tint--2 {
content: 'color: ';
color: map;
}
.yellow--tint--3 {
content: 'color: ';
color: map;
}
.yellow--tint--4 {
content: 'color: ';
color: map;
}
.yellow--tint--5 {
content: 'color: ';
color: map;
}
.yellow--tint--6 {
content: 'color: ';
color: map;
}
.yellow--tint--7 {
content: 'color: ';
color: map;
}
.yellow--tint--8 {
content: 'color: ';
color: map;
}
.yellow--tint--9 {
content: 'color: ';
color: map;
}
.yellow--tint--10 {
content: 'color: ';
color: map;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment