Skip to content

Instantly share code, notes, and snippets.

@yankeyhotel

yankeyhotel/Hex to rgba Less mixin

Last active August 29, 2015 14:03
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 yankeyhotel/ecec3b196886eab6b05f to your computer and use it in GitHub Desktop.
Save yankeyhotel/ecec3b196886eab6b05f to your computer and use it in GitHub Desktop.
Download ZIP
A LESS Mixin to convert hex color values to rgba color values.
Raw
Hex to rgba Less mixin
.hex-to-rgba (@color, @alpha: 1) {
@hex-to-rgba-red: red(@color);
@hex-to-rgba-green: green(@color);
@hex-to-rgba-blue: blue(@color);
@rgba: rgba(@hex-to-rgba-red, @hex-to-rgba-green, @hex-to-rgba-blue, @alpha);
}
// How to use
.hex-color {
.hex-to-rgba (#ffffff, .5);
color: @rgba;
}
// output
// .hex-color {
// color: rgba(255, 255, 255, 0.5);
// }
@yankeyhotel
Copy link
Author

Thanks to http://josephfitzsimmons.com/home/helpful-less-mixin-to-convert-hex-value-to-rgba & http://lesscss.org/features/#mixins-as-functions-feature

@yankeyhotel
Copy link
Author

Updated the variables by adding the prefix "hex-to-rgba-" so it won't overwrite any variables that might be named @red, @green, and @blue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment