1

the title pretty much explains it all, I have this calculation in LESS, it is the left inset of my sideBar.

sidebar: 300px

content: 960px

// half of the empty space
left: calc(~'(100% - 1260px)' / 2)

Then to calculate the inset of my content div, i need to repeat this and add the width of my sidebar.

I have tried

// half of the empty space
left: calc(~'(100% - 1260px)' / 2 +300px)

// half of the empty space
left: calc((~'(100% - 1260px)' / 2)+300px)

I've also tried to put the original calculatin into a variable and add 300px to that, no luck.

So is this even possible?

Rob
  • 14,746
  • 28
  • 47
  • 65
Kasper Sølvstrøm
  • 270
  • 1
  • 2
  • 22
  • 1
    You may want to have a look at this thread - http://stackoverflow.com/questions/36206484/why-is-this-less-expression-a-syntax-error-depending-on-the-math-operation/36214895#36214895. Put the entire math within the quotes that follow the escape operator. The reasons for this is explained in that answer. – Harry Apr 25 '16 at 12:49
  • 1
    In both cases the mistake is in escaping only the part of the `calc` expression - the proper escaping would be `calc(~'(100% - 1260px) / 2')` and `calc((~'(100% - 1260px) / 2 + 300px')` (the former one compiles w/o a error somewhat accidentally as a side-effect as described in the A linked by @Harry). – seven-phases-max Apr 25 '16 at 21:21

1 Answers1

2

You have to put the escape characters inside of the parentheses to get that part of the statement to evaluate before LESS kicks in: left: calc(~'(100% - 1260px) / 2')

I found a great explanation of how this works for you here: Calculating width from percent to pixel then minus by pixel in LESS CSS

Community
  • 1
  • 1
serraosays
  • 7,163
  • 3
  • 35
  • 60