LESS parametric mixin with multiple variables

Question

I have the following variables set:

@live:background:url('/cmn/static/images/live_placeholder.png');
@online:background:url('/cmn/static/images/online_placeholder.png');
@external:background:url('/cmn/static/images/external_placeholder.png');

I want to create a mixin where I would insert the appropriate parameter to set the background images, like so, but I know I'm missing a step here in setting up the mixin because I'm guessing I need to put something different in the ( ).

.small-thumb(@live){
  background-repeat:no-repeat;
  height:50px;
  width:50px;
  float:left;
  margin-right:5px;
}

but ultimately, in my LESS, I would just call it like so: .small-thumb(@live);

Do I need to make a separate mixin for each one?

Thanks

Answer 1

You can only assign values to variables, not both properties and values. So the correct code would be:

@live:url('/cmn/static/images/live_placeholder.png');
@online:url('/cmn/static/images/online_placeholder.png');
@external:url('/cmn/static/images/external_placeholder.png');

Then you can pass your variables in the .small-thumb function like this:

.small-thumb(@var){
  background-image: @var;
}

And you call the function with the variables you set this way:

.small-thumb(@live);  /* the value of @live is passed to .small-thumb */