Mistalis Mistalis - 3 months ago 15
Less Question

Change background opacity of a less variable

I have the following LESS variable:

@yellow:#fbba00;


I want to apply this color to the background of a
tr
with
opacity: 0.2
.

I tried the following, but the problem is that the opacity is applied to the whole tr, and not only to the background.

I saw several topics dealing with background opacities (1, 2), but they always use
rgba()
to set the color. It does not match what I am looking for (LESS variable).




In LESS/CSS file:

@yellow: #fbba00;

.bg-light-yellow {
background-color: @yellow;
opacity: 0.2;
}


In HTML page:

<tr class="bg-light-yellow">
...
</tr>

Answer

Per this answer, LESS has an embedded function for this called fade.

fade(@color, 50%);   // return @color with 50% transparency in rgba

So this

@yellow: #fbba00;

.bg-light-yellow {
    background-color: fade(@yellow, 20%);
}

complies to this

.bg-light-yellow {
  background-color: rgba(251, 186, 0, 0.2);
}

LESS Reference