Last active
August 29, 2015 14:14
-
-
Save hilja/e2ddd57a455cd55df0d8 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
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// ---- | |
$primary-colors: ( | |
"red": (rbga(255, 0, 0, .5), rbg(255, 0, 0)), | |
"green": (rbga(255, 0, 0, .5), rbg(0, 255, 0)), | |
"blue": (rbga(255, 0, 0, .5), rbg(0, 0, 255)) | |
); | |
// In my lizard brain, the following make perfect sense, | |
// but if used it returns and error: | |
// "List index is 2 but list is only 1 item long for `nth'". | |
// It won't see the values as a list. Bummer. | |
@mixin colors-w-fallbacks-2($color) { | |
background: nth($color, 2); | |
} | |
// But when loopong the map, the values are seen as a | |
// list. | |
@mixin colors-w-fallbacks($color) { | |
@if not map-has-key($primary-colors, $color) { | |
@warn "No color found for #{$color} in $primary-colors map. Ktnxbye."; | |
} | |
@each $color-name, $color-code in $primary-colors { | |
@if $color-name == $color { | |
background: "#{nth($color-code, 2)}"; | |
background: "#{nth($color-code, 1)}"; | |
} | |
} | |
} | |
// Usage | |
.thingy { | |
@include colors-w-fallbacks("red"); | |
} |
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
.thingy { | |
background: "rbg(255, 0, 0)"; | |
background: "rbga(255, 0, 0, 0.5)"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment