Change background opacity of a less variable

Question

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 1

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