Modify alpha opacity of LESS variable

css variables less opacity alpha
ben picture ben · Oct 7, 2012 · Viewed 75.2k times · Source

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this:

background: lighten(@blue, 20%);

I want to change the alpha opacity of my color, though. Preferably like this:

background: alpha(@blue, 20%);

Is there a simple way to do this in LESS?

Answer

ScottS picture ScottS · Oct 7, 2012

The site documentation gives the answer:

background: fade(@blue, 20%);

The function name is fade not alpha according to that document.

Related questions

LESS css set dynamic background image with mixin

I am using LESS CSS . I am currently using Mixins with variables. Something like this works okay : .border-radius (@radius) { border-radius: @radius; } #header { .border-radius(4px); } This is not : .bg-img(@img) { background-image:url(@img); } #logo { .bg-img("../images/logo.jpg"); } i have tried …

Read More
How can I define colors as variables in CSS?

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just …

Read More
Set Webkit Keyframes Values Using Javascript Variable

I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} } #dog{ /*irrelevant settings*/ -webkit-animation: rotate 5…

Read More