Created
November 10, 2015 20:32
-
-
Save koycarraway/b62367aadf49275f60d1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
//--------------------------- | |
// | |
// Color variables | |
// | |
// Inspired by/based on Erskine's color palette structure: | |
// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/ | |
// | |
//--------------------------- | |
$DBglobalColors: ( | |
white: #ffffff, | |
black: #000000, | |
blue: ( | |
"25": #e8f6fc, | |
"50": #c3e9fa, | |
"100": #a2e0fa, | |
"200": #6fcff7, | |
"300": #49c1f5, | |
"400": #24B4f2, | |
"500": #00a1e6, | |
"600": #0086bf, | |
"700": #006B99, | |
"800": #005073, | |
"900": #00364d, | |
), | |
) !default; | |
$DBgrayscaleColors: ( | |
1: #171717, | |
2: #2e2e2e, | |
3: #454545, | |
4: #5c5c5c, | |
5: #737373, | |
6: #8a8a8a, | |
7: #a1a1a1, | |
8: #b8b8b8, | |
9: #cfcfcf, | |
10: #e8e8e8, | |
) !default; | |
//--------------------------- | |
// | |
// Color functions | |
// | |
//--------------------------- | |
//--------------------------- | |
// | |
// Defining acceptable alpha & shade values for color functions | |
// | |
//--------------------------- | |
$__alpha-stops: (0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1); | |
$__shade-vals: ("25", "50", "100", "200", "300", "400", "500", "600", "700", "800", "900"); | |
//--------------------------- | |
// | |
// The grayscale function takes two arguments: | |
// REQUIRED: Level of gray | |
// There are 10 levels of gray, ranging from 1 to 10 (darkest to lightest). | |
// OPTIONAL: Level of opacity | |
// There are 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque). | |
// | |
// Example: grayscale(1, 1); | |
// This will create a dark gray that is fully opaque. | |
// | |
//--------------------------- | |
@function grayscale($gradation, $alpha: 1) { | |
@if map-has-key($DBgrayscaleColors, $gradation) { | |
$alpha-val: $alpha; | |
@if index($__alpha-stops, $alpha-val) == null { | |
@error "Only alpha values in 0.1 increments are allowed"; | |
} | |
$grayscale-val: map-get($DBgrayscaleColors, $gradation); | |
@return rgba($grayscale-val, $alpha-val); | |
} @else { | |
@warn "No gradation of #{$gradation} found in $DBgrayscaleColors map."; | |
} | |
} | |
//--------------------------- | |
// | |
// The color function takes three arguments: | |
// REQUIRED: Color | |
// There are 7 colors (gray, blue, green, red, yellow, black, white). | |
// OPTIONAL: Shade | |
// Each color has 6 shades (x-dark, dark, base, medium, light, x-light). | |
// OPTIONAL: Opacity | |
// Each shade has 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque). | |
// | |
// Example: color(blue); | |
// This will create a base blue that is fully opaque. | |
// | |
// Example 2: color(red, dark, 0.8); | |
// This will create a dark red that is 80% opaque. | |
// | |
// Example 3: color(yellow, 0.6); | |
// This will create a base yellow that is 60% opaque. | |
// | |
//--------------------------- | |
@function color($name, $properties...) { | |
$n: length($properties); | |
$i: 1; | |
$shade-val: "500"; | |
$alpha-val: 1; | |
@while $i <= $n { | |
$current-property: (nth($properties, $i)); | |
@if type-of($current-property) == "string" { | |
$shade-val: $current-property; | |
} @else if type-of($current-property) == "number" { | |
$alpha-val: $current-property; | |
} | |
$i: $i + 1; | |
} | |
@if index($__shade-vals, $shade-val) == null { | |
@warn "Only the following shades are allowed: " + $__shade-vals; | |
} | |
@if index($__alpha-stops, $alpha-val) == null { | |
@error "Only alpha values in 0.1 increments are allowed"; | |
} | |
@if map-has-key($DBglobalColors, $name) { | |
$rgb-val: (); | |
@if $name == white or $name == black { | |
$rgb-val: map-get($DBglobalColors, $name); | |
} @else { | |
$rgb-val: map-get(map-get($DBglobalColors, $name), $shade-val); | |
} | |
@return rgba($rgb-val, $alpha-val); | |
} @else { | |
@warn "No global color called #{$name} found." | |
+ "Are you sure it's in `variables/colors?`"; | |
} | |
} | |
.stat { | |
color: color(blue); | |
color: color(blue, "25"); | |
color: color(blue, "800"); | |
} |
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
.stat { | |
color: #00a1e6; | |
color: #e8f6fc; | |
color: #005073; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment