Color in Sass

color-variation.scss

/**
 * Color variations
 *
 * Each colors used in the site.
 * 
 * @uses 	the_color( $key, $value ) to retrieve color value
 * @type 	nested map
 * @see 	http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
 * @see 	http://www.colorhexa.com/ to pickup color name
 * @author 	Jérémy Levron <levronjeremy@19h47.fr>
 */
$color-variations: (
	black: #000000,
	white: #ffffff,
	
	blue: (		
		pure: #0000ff,
		very-soft: #84ADD9,
		light-grayish: #ccecfa,
	),

	red: (
		strong: #ff0000,
	),

	gray: (
		very-light: #ececec,
		light: #c9c9c9,
	),

	orange: (
		very-soft: #eecea1,
		light-grayish: #dbd2cb,
		very-light: #ffc494
	),

	green: (
		slightly-desaturated-lime: #95c58b
	),
	
	social: (
		/**
		 * Brand colors
		 *
		 * @see https://brandcolors.net/
		 */
		facebook: #3b5998, 
		twitter: #1da1f2,
		google-plus: #dd4b39,
		linkedin: #0077b5,
		mail: #000000,
	)
);

index.scss

.foo {
	color: the_color( black );
}

.bar {
	color: the_color( social, twitter );
}

the-color.scss

/**
 * Get the color
 *
 * Get color from $color-variations map, inspired by WordPress and its the_title/get_the_title functions.
 * 
 * Thanks to Hugo Giraudel, as usual, master of Sass. 😊
 *
 * @access  public
 * @author 	Jérémy Levron <levronjeremy@19h47.fr>
 */
@function get_the_color( $keys... ) { 
    
    $map: $color-variations;
    $color-base: map-get( $map, nth( $keys, 1 ) );
    $result: null;

    @if length( $keys ) == 1 {

        $result: $color-base;
    }

    @if length( $keys ) == 2 {
        
        // Stock the second value 
        $color-value: nth( $keys, 2 );

        $result: map-get( $color-base, $color-value );
    }
    

    @return $result;
}


/**
 * The color
 * 
 * Retrieve the color from $color-variations map
 *
 * @param  arglist          $keys
 * @return function         get_the_color()
 * @author Jérémy Levron    <levronjeremy@19h47.fr>
 */
@function the_color( $keys... ) {
    @return get_the_color( $keys... );
}