'alpha-me' is a SCSS mixin that calculates a fallback solid color based on a translucent color (rgba or hsla) and a background color (by default, white) and returns both colors (fallback and original) with their properties and attributes. This allows us to use this mixin for multiple properties, such as: borders, shadows, etc. View live example at

README.md

alpha-me()

A SCSS mixin to create RGB fallbacks for RGBa styles.

• By: @cballenar
• Last updated: January 4th, 2014

How to

This mixin takes up to 4 arguments (minimum of two)

• $property: the css property to be used, e.g.: 'border'
• $attributes: the additional attributes, e.g.: '1px solid'
• $color: the translucent color to be used, e.g.: 'rgba(240,20,200,.5)'
• $background: color that will be used in mix, e.g.: '#DADADA'

You're required to enter at least the $property and $color variables, so you end up with the following options:

• @include alpha-me($property, $color);
• @include alpha-me($property, $color, $background);
• @include alpha-me($property, $attributes, $color);
• @include alpha-me($property, $attributes, $color, $background);

Sample input

.element { 
	@include alpha-me( color, rgba(black,.5) );

	@include alpha-me( background-color, rgba(#dffa14,.5), #529ef0);

	@include alpha-me( box-shadow, 1px 1px 2px, rgba(white, .25));

	@include alpha-me( border, 3px solid, rgba(240,20,200,.5), #DADADA); }

Sample output:

.element { 
	color: #7F7F7F;
	color: rgba(0, 0, 0, 0.5);

	background-color: #98CC82;
	background-color: rgba(223, 250, 20, 0.5);

	box-shadow: 1px 1px 2px #FFF;
	box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);

	border: 3px solid #E577D1;
	border: 3px solid rgba(240, 20, 200, 0.5); }

Notes

• If no background color is specified, white is used by default
• We can use the rgba SASS function to enter the translucent color in other formats
  • rgba(red, .5)
  • rgba(#dffa14, .75)
• Can you think of a better name for the mixin? I'm not in love with it...

=======================================================================================

Credits

Thanks to John W. Long (@johnwlong) whose work is the heart of this mixin. (http://thesassway.com/intermediate/mixins-for-semi-transparent-colors)

=======================================================================================

_alpha-me.scss

@mixin alpha-me($var1, $var2, $var3:null, $var4:null) {

	// Set variables for global use
	$property:   $var1;
	$attributes: null;
	$color:      null;
	$color-bg:   null;

	// Check if $var2 is a color
	@if ( type-of($var2) == color ) { 

		// Set default background if not specified
		@if not $var3 { $var3: #FFFFFF; }

		// Update variables
		$color:      $var2;
		$color-bg:   $var3;


	// Otherwise it should be the attributes
	} @else if ( type-of($var2) != color ) {

		// Set default background if not specified
		@if not $var4 { $var4: #FFFFFF; }

		// Update variables
		$attributes: $var2;
		$color:      $var3;
		$color-bg:   $var4;

	}

	// Extract alpha channel from color
	$percent: alpha($color) * 100%;

	// Make color opaque
	$opaque: opacify($color, 1);

	// Blend color with background.
	$color-solid: mix($opaque, $color-bg, $percent);

	// Return built style with solid color and transparent color
	#{$property}: #{$attributes} $color-solid;
	#{$property}: #{$attributes} $color;
}