Color Palette Functions

@function remove-nth($list, $index) { $result: null; @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `remove-nth`."; } @else if $index == 0 { @warn "List index 0 must be a non-zero integer for `remove-nth`."; } @else if abs($index) > length($list) { @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; } @else { $result: (); $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i != $index { $result: append($result, nth($list, $i)); } } } @return $result; } @function val($map, $keys...) { @if nth($keys, 1) == null { $keys: remove-nth($keys, 1); } @each $key in $keys { $map: map-get($map, $key); } @return $map; } @function _palette($keys...) { @return val($palette, $keys...); } $palette: ( primary-color: #153e78, secondary-color: #37bb78, third-color: #9013fe, fourth-color: #72d3d5, fifth-color: #ffc21f, sixth-color: #f36e35, default-black: #000000, default-white: #ffffff ); .colors { background-color: _palette(primary-color); } /* output .colors { background-color: #153e78; } */
SCSS Color Palette Functions.

2 Responses

Why you don't simply use the map-get function?
You're right. Because actually met in a long process, it was such .. (sorry my english a little bad :/)

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.