Created
January 22, 2014 07:23
-
-
Save aliatsis/8554738 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
| <div class="myClass" style>Please Click Me!</button> |
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
| // ---- | |
| // Sass (v3.3.0.rc.2) | |
| // Compass (v1.0.0.alpha.17) | |
| // ---- | |
| @function parseNumber($number) { | |
| @return $number / ($number * 0 + 1); | |
| } | |
| @function isNeutralBg($color) { | |
| $l: parseNumber(lightness($color)); | |
| @return parseNumber(saturation($color)) < (20 + if($l > 75, (($l - 75) * ($l - 75)) / 24000, 0)) and $l > 65 and $l < 100; | |
| } | |
| //Neutral: start | |
| $colorNeutral3-: #78777a; | |
| $colorNeutral2-: #acabae; | |
| $colorNeutral1-: #cacac9; | |
| $colorNeutral0: #dddddc; | |
| $colorNeutral1: #ededeb; | |
| $colorNeutral2: #f1f1f1; | |
| $colorNeutral3: #f2f2ef; | |
| $colorNeutral4: #f6f6f5; | |
| $colorNeutrals: $colorNeutral3-, $colorNeutral2-, $colorNeutral1-, $colorNeutral0, $colorNeutral1, $colorNeutral2, $colorNeutral3, $colorNeutral4; | |
| //Neutral: end | |
| //Grey: start | |
| $colorGrey3-: #38454c; | |
| $colorGrey2-: #4a5357; | |
| $colorGrey1-: #8c9ea5; | |
| $colorGrey0: #c6ced2; | |
| $colorGreys: $colorGrey3-, $colorGrey2-, $colorGrey1-, $colorGrey0; | |
| //Grey: end | |
| //Navy: start | |
| $colorNavy3-: #1a333d; | |
| $colorNavy2-: #133340; | |
| $colorNavy1-: #173e4d; | |
| $colorNavy0: #1c4657; | |
| $colorNavy1: #356880; | |
| $colorNavy2: #317290; | |
| $colorNavy3: #6c848f; | |
| $colorNavy4: #9bb6b8; | |
| $colorNavys: $colorNavy3-, $colorNavy2-, $colorNavy1-, $colorNavy0, $colorNavy1, $colorNavy2, $colorNavy3, $colorNavy4; | |
| //Navy: end | |
| //Teal: start | |
| $colorTeal4-: #37736a; | |
| $colorTeal3-: #469594; | |
| $colorTeal2-: #55998b; | |
| $colorTeal1-: #38b29a; | |
| $colorTeal0: #67bbaa; | |
| $colorTeal1: #aeddd5; | |
| $colorTeal2: #e0f1ec; | |
| $colorTeals: $colorTeal4-, $colorTeal3-, $colorTeal2-, $colorTeal1-, $colorTeal0, $colorTeal1, $colorTeal2; | |
| //Teal: end | |
| //Marigold: start | |
| $colorMarigold0: #f79849; | |
| $colorMarigold1: #f2a14a; | |
| $colorMarigold2: #ffc99c; | |
| $colorMarigolds: $colorMarigold0, $colorMarigold1, $colorMarigold2; | |
| //Marigold: end | |
| //Coral: start | |
| $colorCoral3-: #ab3e28; | |
| $colorCoral2-: #bd452e; | |
| $colorCoral1-: #ed5646; | |
| $colorCoral0: #f16b50; | |
| $colorCorals: $colorCoral3-, $colorCoral2-, $colorCoral1-, $colorCoral0; | |
| //Coral: end | |
| //Green: start | |
| $colorGreen0: #29b473; | |
| $colorGreens: $colorGreen0; | |
| //Green: end | |
| //White: start | |
| $colorWhite0: #FFFFFF; | |
| $colorWhites: $colorWhite0; | |
| //White: end | |
| @function test($list) { | |
| $result: ""; | |
| @each $col in $list { | |
| $result: $result + isNeutralBg($col) + " "; | |
| } | |
| @return $result; | |
| } | |
| @function testContrast($list) { | |
| $result: ""; | |
| @each $col in $list { | |
| $result: $result + (lightness($col) < 63) + " "; | |
| } | |
| @return $result; | |
| } | |
| .neutralBg { | |
| neutrals: test($colorNeutrals); | |
| greys: test($colorGreys); | |
| navys: test($colorNavys); | |
| teals: test($colorTeals); | |
| marigolds: test($colorMarigolds); | |
| corals: test($colorCorals); | |
| greens: test($colorGreens); | |
| whites: test($colorWhites); | |
| } | |
| .constrastToLight { | |
| neutrals: testContrast($colorNeutrals); | |
| greys: testContrast($colorGreys); | |
| navys: testContrast($colorNavys); | |
| teals: testContrast($colorTeals); | |
| marigolds: testContrast($colorMarigolds); | |
| corals: testContrast($colorCorals); | |
| greens: testContrast($colorGreens); | |
| whites: testContrast($colorWhites); | |
| } | |
| $bg: $colorNeutral2-; | |
| .myClass { | |
| background: $bg; | |
| color: $colorNavy0; | |
| lightness: lightness($bg); | |
| saturation: saturation($bg); | |
| result: isNeutralBg($bg); | |
| } |
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
| .neutralBg { | |
| neutrals: "false true true true true true true true "; | |
| greys: "false false false true "; | |
| navys: "false false false false false false false true "; | |
| teals: "false false false false false false false "; | |
| marigolds: "false false false "; | |
| corals: "false false false false "; | |
| greens: "false "; | |
| whites: "false "; | |
| } | |
| .constrastToLight { | |
| neutrals: "true false false false false false false false "; | |
| greys: "true true true false "; | |
| navys: "true true true true true true true false "; | |
| teals: "true true true true true false false "; | |
| marigolds: "true true false "; | |
| corals: "true true true true "; | |
| greens: "true "; | |
| whites: "false "; | |
| } | |
| .myClass { | |
| background: #acabae; | |
| color: #1c4657; | |
| lightness: 67.64706%; | |
| saturation: 1.81818%; | |
| result: true; | |
| } |
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
| <div class="myClass" style>Please Click Me!</button> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment