_variables-colors.scss

/* 

 ---------------------------------------------------------------------------
 Custom colors
 ---------------------------------------------------------------------------

 Sass maps are used to create an associative array that can later be 
 looped through to dynamically create a class for each item. An example 
 would be the use of the .fill-facebook class to use facebooks branding 
 as the background color or stroke of a component.

 ----------------------------------
 Example loop:
 ----------------------------------

 @each $color, $i in $all-colors {
	
	.fill-#{$color} {
		background-color: $i;
		&:hover {
			background-color: darken($i, 10%);
		}
	}

	.stroke-#{$color} {
		border: 1px solid $i;
	}

 }

 ----------------------------------
 Output:
 ----------------------------------

 .fill-facebook {
   background-color: #365396;
 }
 
 .fill-facebook:hover {
   background-color: #293e70;
 }

 .stroke-facebook {
   border: 1px solid #365396;
 }

 ---------------------------------------------------------------------------	
  
*/

/*
 =========================================================================== 
 Brand colors
 =========================================================================== 
*/

$brand-colors: (
	primary: #ED3848,
	secondary: #646567
);

/*
 =========================================================================== 
 Social colors
 =========================================================================== 
*/

$social-colors: (
	facebook: hsla(222, 47%, 40%, 1),
	twitter: hsla(198, 100%, 47%, 1),
	linkedin: hsla(203, 100%, 35%, 1),
	apple: hsla(0, 0%, 45%, 1),
	google: hsla(217, 89%, 61%, 1),
	google-plus: hsla(8, 74%, 53%, 1),
	youtube: hsla(0, 100%, 60%, 1),
	vimeo: hsla(200, 82%, 61%, 1),
	pinterest: hsla(0, 78%, 45%, 1),
	yelp: hsla(5, 100%, 38%, 1),
	dribbble: hsla(338, 82%, 60%, 1),
	amazon: hsla(36, 100%, 50%, 1),
	ebay: hsla(219, 89%, 30%, 1),
	skype: hsla(198, 100%, 48%, 1),
	instagram: hsla(208, 46%, 41%, 1),
	dropbox: hsla(206, 89%, 46%, 1),
	flickr: hsla(334, 100%, 46%, 1),
	github: hsla(0, 0%, 18%, 1),
	basecamp: hsla(121, 38%, 58%, 1),
	tumblr: hsla(210, 37%, 30%, 1),
	foursquare: hsla(206, 72%, 45%, 1),
	box: hsla(204, 83%, 40%, 1)
);

/*
 =========================================================================== 
 All colors
 =========================================================================== 
*/

$all-colors:;
$all-colors: map-merge( $brand-colors, $all-colors );
$all-colors: map-merge( $social-colors, $all-colors );