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

Asked

Viewed 70 times

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 wish instead of the "100%" code above, I could put a variable called @valor1, that way I’d have a mixin that would help me in every situation where I needed to calc(), however, when I do the form below 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’ve tried several ways, several combinations, but none works, as I can use two variables in a function calc()?

less

  • Remove the quotation marks ("") from the variable @valor1.

  • It’s the first way I tried, it doesn’t work. Pro Less compile @Calc, it needs to be written this way: http://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc

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})'
}

  • It worked directly only, but only with the two points after the variable @valor1. .calcW(@valor1: 100%, @valor2: 100px){
 width: ~'calc(@{valor1} - @{valor2})'
} @Renan, thank you very much!

  • @Guilhermelaureano truth, error of syntax :D corrected. The first way is to work too, gave some error?

  • Here did not compile the first time, but I tested again and it worked, I must have done something wrong but I have no idea what, rs. So, should I put the prefixes Moz and Webkit as I had done before? If so, what would the syntax look like?

  • In the same way that I was doing, the difference is that it will use interpolation to reference the variable valor1 with the syntax @{}. A more interesting stop to make is to define these prefixes in a list - since they will always be the same. And then make a mixin generic (which receives a property and value) and goes through the list by applying the prefix values to the property. Less supports loops. :D

Browser other questions tagged less

You are not signed in. Login or sign up in order to post.