Lincoln Electric Color Module
@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;
}
<div class="gray80_bg">
<p class="khaki">A Link ></p>
</div>
Updated Lincoln Electric bran color palette. Updated March 6, 2015 at 4:48 PM
A Pen by Dylan Burkey on CodePen.