Skip to content

Instantly share code, notes, and snippets.

@lewismcarey
Last active August 29, 2015 14:27
Show Gist options
  • Save lewismcarey/1125404bea51d1cf8bd2 to your computer and use it in GitHub Desktop.
Save lewismcarey/1125404bea51d1cf8bd2 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// list for class names
$alpha: a b c d e f g h i j k l m n o p q r s t u v w x y z;
// Color Map
$colors: (
blue: #0000FF,
red: (
base: #FF0000,
light: #EEEEFF,
dark: #5555FF
)
);
// Color Scheme
$color-scheme: (
cs-a: #000, // 1. color
cs-b: (red: light), // 2. key: value to represent color-map
cs-c: map-get(map-get($colors, red), dark) // 3. actual nested map-get
// 4 is auto scheme
);
// Color Function
@function get-color( $color, $shade: 'base', $map : $colors ){
// check color exists
@if (map-has-key($map, $color)) {
$value: map-get($map, unquote($color));
// check if color or map
@if type-of($value) == color {
// return color
@return $value;
}
// check shade of color exists
@if (map-has-key($value, $shade)) {
// return shade of color
@return map-get($value, $shade);
}
}
// else do nothing
@return null;
}
// contrasting font color
@function set-font-color($color, $dark: #000, $light: #FFF) {
// return $dark or $light color depending on lightness of $color
@return if(lightness($color) > 50, $dark, $light);
}
@mixin auto-scheme-do( $map: $colors, $dark: #000, $light: #FFF) {
@each $name, $color in $map {
$i: index( map-keys($map), $name);
@if (type-of($color) == color ) {
.cs-#{unquote($name)},
.cs-#{nth($alpha, $i)}{
background-color: $color;
color: set-font-color($color, $dark, $light);
@content
}
} @else {
@each $shade, $value in $color {
$x: index(map-keys($color), $shade);
.cs-#{unquote($name)}--#{unquote($shade)},
.cs-#{nth($alpha, $i)}--#{nth($alpha, $x)}
{
background-color: $value;
color: set-font-color($value, $dark, $light);
@content
}
}
}
}
}
@include auto-scheme-do();
@mixin scheme-do( $map: $color-scheme, $dark: #000, $light: #FFF ) {
@each $scheme, $color in $map {
.#{unquote($scheme)} {
background-color: if(type-of($color) == color, $color, get-color(nth(map-keys($color), 1),nth(map-values($color), 1)));
color: set-font-color(if(type-of($color) == color, $color, get-color(nth(map-keys($color), 1),nth(map-values($color), 1))), $dark, $light);
@content
}
}
}
@include scheme-do($color-scheme){ font-size: 20px; };
@include scheme-do($color-scheme, #333, #EFEFEF);
.color {
color: set-font-color(get-color(blue));
background-color: get-color(red, dark);
border-top-color: get-color(pink); // no color so null
border-bottom-color: get-color(red, darker); // no shade in map so null
border-right-color: get-color(green, dark); // not a map so returns color
}
.cs-blue,
.cs-a {
background-color: #0000FF;
color: #000;
}
.cs-red--base,
.cs-b--a {
background-color: #FF0000;
color: #000;
}
.cs-red--light,
.cs-b--b {
background-color: #EEEEFF;
color: #000;
}
.cs-red--dark,
.cs-b--c {
background-color: #5555FF;
color: #000;
}
.cs-a {
background-color: #000;
color: #FFF;
font-size: 20px;
}
.cs-b {
background-color: #EEEEFF;
color: #000;
font-size: 20px;
}
.cs-c {
background-color: #5555FF;
color: #000;
font-size: 20px;
}
.cs-a {
background-color: #000;
color: #EFEFEF;
}
.cs-b {
background-color: #EEEEFF;
color: #333;
}
.cs-c {
background-color: #5555FF;
color: #333;
}
.color {
color: #000;
background-color: #5555FF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment