Created
February 12, 2016 18:45
-
-
Save jeremycaldwell/aa229a3e075bd5a63c0b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
// color() mixin: | |
///////////////////////////////////////////////////// | |
// Gets the specified color from the color palette // | |
// // | |
// Usage: // | |
// background: color('blue'); // #0099CE // | |
///////////////////////////////////////////////////// | |
@function color($color) { | |
@return map-get($palettes, $color); | |
} | |
// get-colors() mixin: | |
@function get-colors($color: null) { | |
// Return a list of colors available if nothing is passed in. | |
@if $color == null { | |
@return map-keys($palettes); | |
} | |
// Return the full color map if 'all' is passed in. | |
@else if $color == 'all' { | |
@return $palettes; | |
} | |
// Return just the color map if a specific color is passed in. | |
@else { | |
@return map-get($palettes, $color); | |
} | |
} | |
// get-initiatives() mixin: | |
@function get-initiatives($color: null) { | |
// Return a list of initiatives available if nothing is passed in. | |
@if $color == null { | |
@return map-keys($initiatives); | |
} | |
// Return the full color map if 'all' is passed in. | |
@else if $color == 'all' { | |
@return $initiatives; | |
} | |
// Return just the color map if a specific color is passed in. | |
@else { | |
@return map-get($initiatives, $color); | |
} | |
} | |
///////////////////////////////////////////////////// | |
// Palette Map | |
$palettes: ( | |
'blue': #0099CE, | |
'green': #39B54A, | |
'orange': #EB8F2D, | |
'pink': #C1167A, | |
'purple': #6D13B0, | |
'navy': #1B1464, | |
'brown': #70614F, | |
'gray': #6D6D6D, | |
'lt-gray': #A8A8A9, | |
'dk-brown': #2b2b2b, | |
'beige': #e7e5e3, | |
'black': #000000, | |
'white': #ffffff | |
); | |
// Initiatives Map | |
$initiatives: ( | |
'arts': color('blue'), | |
'community': color('pink'), | |
'education': color('orange'), | |
'humanitarian': color('green'), | |
'nonprofit': color('navy'), | |
'partnerships': color('purple') | |
); | |
///////////////////////////////////////////////////// | |
// Variables | |
$color-keys: get-colors(); | |
$full-color-map: get-colors('all'); | |
$full-initiatives: get-initiatives('all'); | |
///////////////////////////////////////////////////// | |
// Generate a class for each initiative category. | |
@each $palette-name, $palette in $full-initiatives { | |
@each $color in $palette { | |
.initiative-category__#{$palette-name} { | |
background: $color; | |
// Button. | |
a.button, | |
a.button:visited { | |
border-color: $color; | |
color: $color; | |
} | |
// Hero header. | |
.hero__header { | |
a, | |
a:visited { | |
border-color: $color; | |
} | |
} | |
} | |
} | |
} | |
///////////////////////////////////////////////////// | |
h1 { | |
background: color('blue'); | |
} | |
h2 { | |
background: color('orange'); | |
} | |
This file contains hidden or 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
.initiative-category__arts { | |
background: #0099CE; | |
} | |
.initiative-category__arts a.button, | |
.initiative-category__arts a.button:visited { | |
border-color: #0099CE; | |
color: #0099CE; | |
} | |
.initiative-category__arts .hero__header a, | |
.initiative-category__arts .hero__header a:visited { | |
border-color: #0099CE; | |
} | |
.initiative-category__community { | |
background: #C1167A; | |
} | |
.initiative-category__community a.button, | |
.initiative-category__community a.button:visited { | |
border-color: #C1167A; | |
color: #C1167A; | |
} | |
.initiative-category__community .hero__header a, | |
.initiative-category__community .hero__header a:visited { | |
border-color: #C1167A; | |
} | |
.initiative-category__education { | |
background: #EB8F2D; | |
} | |
.initiative-category__education a.button, | |
.initiative-category__education a.button:visited { | |
border-color: #EB8F2D; | |
color: #EB8F2D; | |
} | |
.initiative-category__education .hero__header a, | |
.initiative-category__education .hero__header a:visited { | |
border-color: #EB8F2D; | |
} | |
.initiative-category__humanitarian { | |
background: #39B54A; | |
} | |
.initiative-category__humanitarian a.button, | |
.initiative-category__humanitarian a.button:visited { | |
border-color: #39B54A; | |
color: #39B54A; | |
} | |
.initiative-category__humanitarian .hero__header a, | |
.initiative-category__humanitarian .hero__header a:visited { | |
border-color: #39B54A; | |
} | |
.initiative-category__nonprofit { | |
background: #1B1464; | |
} | |
.initiative-category__nonprofit a.button, | |
.initiative-category__nonprofit a.button:visited { | |
border-color: #1B1464; | |
color: #1B1464; | |
} | |
.initiative-category__nonprofit .hero__header a, | |
.initiative-category__nonprofit .hero__header a:visited { | |
border-color: #1B1464; | |
} | |
.initiative-category__partnerships { | |
background: #6D13B0; | |
} | |
.initiative-category__partnerships a.button, | |
.initiative-category__partnerships a.button:visited { | |
border-color: #6D13B0; | |
color: #6D13B0; | |
} | |
.initiative-category__partnerships .hero__header a, | |
.initiative-category__partnerships .hero__header a:visited { | |
border-color: #6D13B0; | |
} | |
h1 { | |
background: #0099CE; | |
} | |
h2 { | |
background: #EB8F2D; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment