Skip to content

Instantly share code, notes, and snippets.

@jeremycaldwell
Created February 12, 2016 18:45
Show Gist options
  • Save jeremycaldwell/aa229a3e075bd5a63c0b to your computer and use it in GitHub Desktop.
Save jeremycaldwell/aa229a3e075bd5a63c0b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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');
}
.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