Skip to content

Instantly share code, notes, and snippets.

@jasonhodges
Created November 27, 2013 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonhodges/7681706 to your computer and use it in GitHub Desktop.
Save jasonhodges/7681706 to your computer and use it in GitHub Desktop.
Sass mixin copied from a fiddle by csswizardry http://jsfiddle.net/csswizardry/h3eG8/
/**
* A very simple, pragmatic Sass mixin for generating any property with an rgba() colour
* and its associated fallback (sourced from the original rgba() colour).
*
* Do not use if you require a fallback vastly different from the rgba().
*
* 1. Strip the alpha value and write out a solid rgb() color.
* 2. Drop the red, green, blue, and alpha paramaters into the relevant places.
*/
@mixin rgba($property, $red, $green, $blue, $alpha) {
#{$property}: rgb(#{$red}, #{$green}, #{$blue}); /* [1] */
#{$property}: rgba(#{$red}, #{$green}, #{$blue}, #{$alpha}); /* [2] */
}
h1 {
@include rgba(color, 255, 0, 0, 0.5)
}
.box {
padding: 1em;
color: #fff;
@include rgba(background-color, 0, 0, 0, 0.5);
border: 2px solid;
@include rgba(border-color, 0, 0, 0, 0.5)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment