Lincoln Electric Color Module

index.html

<div class="gray80_bg">
  <p class="khaki">A Link ></p>
</div>

Lincoln-Electric-Color-Module.markdown

Lincoln Electric Color Module

Updated Lincoln Electric bran color palette. Updated March 6, 2015 at 4:48 PM

A Pen by Dylan Burkey on CodePen.

License.

style.scss

@import "compass/css3";
/**
 * Lincoln Electric Colors
 *
 * Updated colors for all Lincoln Electric online use. Colors do not match what
 * we currently use on Lincoln Electric.
 *
 * @access public
 * @author Dylan Burkey
 * @group UI
 * @alias Color Guide
 * @type 
 * @see $lincoln-colors
 * @requires
 * @example
 * 	@include colors();
 * 	<div class="red_bg">
 *		<p>Example</p>
 *	</div>
 *
 * @since March 6, 2015
 * @since 4:39 PM
 *
 */

	$lincoln-colors: (
		gray10: #e6e6e6,
		gray20: #ccc,
		gray30: #b3b3b3,
		gray40: #999,
		gray50: #808080,
		gray60: #666,
		gray70: #4d4d4d,
		gray80: #333,
		gray90: #191919,
		khaki: #D5CA9E,
		red: #A6192E,
		black: #000,
		white: #fff
	);

@mixin colors(){
@each $color, $value in $lincoln-colors {
	.#{$color}{
        color: $value;
			&_bg {
				background-color: $value;
			}	
		}
	}
}

@include colors();

p {
	padding: 10em;
}