Mistalis Mistalis - 7 months ago 43
Less Question

Change background opacity of a less variable

I have the following LESS variable:


I want to apply this color to the background of a
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
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">


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