Last active
July 19, 2016 10:15
-
-
Save mrowles/df461490b4568a3db4d7e3826f96745c to your computer and use it in GitHub Desktop.
Nice way to manage colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Color palette */ | |
$colors: ( | |
white-1: #fff, | |
black-1: #000, | |
grey-1: #eee, | |
grey-2: #ccc, | |
blue-1: #69d2e7, | |
blue-2: #a7dbd8, | |
red-1: #e82d27, | |
red-2: #d82023, | |
green-1: #9be54b, | |
green-2: #c1f97c | |
); | |
/* Classes for color palette */ | |
@mixin color-classes { | |
@each $name, $color in $colors { | |
/* | |
Background classes | |
Use in HTML: | |
<div class="bg-red-1">...</div> | |
*/ | |
.bg-#{$name} { | |
background-color: $color; | |
} | |
/* | |
Text color classes | |
Use in HTML: | |
<div class="color-blue-1">...</div> | |
*/ | |
.color-#{$name} { | |
color: $color; | |
} | |
} | |
} | |
@include color-classes; | |
/* | |
Color retrieval function | |
Use in SCSS: | |
color: color(blue-1); | |
*/ | |
@function color($color) { | |
@return map-get($colors, $color); | |
} | |
/* Color global variable examples */ | |
$color-primary: color(blue-1); | |
$color-secondary: color(red-2); | |
$color-tertiary: color(green-1); | |
$color-header: color(grey-1); | |
$color-body: color(black-1); | |
$color-footer: color(grey-2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment