Mixin in LESS for the "calc ()" function of CSS, how to use two variables?

Question

Mixin in LESS for the "calc ()" function of CSS, how to use two variables?

Navigation

#1 by (1 votes)

1

I have this mixin that works perfectly:

.calcW(@valor2: 100px) { 
    width: -o-calc(~"100% - "@valor2);
    width: -webkit-calc(~"100% - "@valor2);
    width: -moz-calc(~"100% - "@valor2);
    width: calc(~"100% - "@valor2);
}

I would like instead of the "100%" of the code above, I could put a variable called @valor1 , so I would have a mixin that would help me in every situation I needed of calc() , but when I do it the way it does not work.

.calcW(@valor1: 100%, @valor2: 100px) { 
    width: -o-calc(~"@valor1 - "@valor2);
    width: -webkit-calc(~"@valor1 - "@valor2);
    width: -moz-calc(~"@valor1 - "@valor2);
    width: calc(~"@valor1 - "@valor2);
}

I have tried in many ways, several combinations, but none works, how can I use two variables in a calc() function?

less

asked by anonymous 18.11.2016 / 16:46

1 answer

menu toogle not returning to desktop query media Generating a new file with a template in Excel when saving

score 1 · Answer 1

Use variable interpolation . Example:

.calcW(@valor1: 100%, @valor2: 100px){
   width: calc(~'@{valor1} - ' @valor2)
}

or directly:

.calcW(@valor1: 100%, @valor2: 100px){
  width: ~'calc(@{valor1} - @{valor2})'
}