Skip to content

Instantly share code, notes, and snippets.

@hilja
Last active August 29, 2015 14:14
Show Gist options
  • Save hilja/e2ddd57a455cd55df0d8 to your computer and use it in GitHub Desktop.
Save hilja/e2ddd57a455cd55df0d8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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");
}
.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