LESS Mixin / Function to change @Color HEX to RGBA to PASS in another mixin

Question

I want to convert the base color in HEX (@color) to rgba and use it in mixin, for example .box-shadow (xyb color);

I saw the mixins load to convert HEX to RGBA and set the background color, and I know that I can create my own mix for box-shadow. But there is a general solution, so we can use any existing mixin.

Tried / wanted something like this (doesn't work) :

/** Extend LESS functions like (lighten, darken, mix) **/
rgbaColorIn(@color, @opacity : 1){
  return rgba( red(@color), green(@color), blue(@color), @opacity );
}

// ----- or ------

/** Passing in a reference to mixin and params **/
.rgbaColorIn(@selector, @params, @color, @opacity : 1){
  @rgbaColor: rgba( red(@color), green(@color), blue(@color), @opacity );
  @selector(@params @color);
}

Answer 1

No keyword returnless. If you want mixin to return a value, you can define a variable inside it, for example:

.rgbaColorIn(@color, @opacity : 1){
  @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

, mixin:

.section {
  .rgbaColorIn(red, 50%);
  background-color: @result;
}

RGBA RGB, fade:

.section {
  @result: fade(red, 50%);
  background-color: @result;
}

CSS:

.section {
  background-color: rgba(255, 0, 0, 0.5);
}

A .box-shadow mixin RGB / :

.box-shadow(@x; @y; @b; @color; @opacity) {
   box-shadow: @x @y @b fade(@color, @opacity);
   -moz-box-shadow: @x @y @b fade(@color, @opacity);
   -webkit-box-shadow: @x @y @b fade(@color, @opacity);
}

, :

.section {
  .box-shadow(2px; 2px; 1px; pink; 50%);
}

CSS:

.section {
  box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -moz-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -webkit-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
}

Answer 2

rgba (, -, 100% , LESS ), fade(). ...

@color: #ff0000;

.test {
  box-shadow: 2px 2px 5px fade(@color, 99%); 
}

CSS

.test {
  box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.99);
}

Answer 3

, , - box-shadow:

.toShadow(@color: red) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  .box-shadow(~"inset 0 0 3px @{color-rgba}");
}