15

When I use this calc(100% + 20px) directly in Chromes and Firefox' Inspector it works fine and as shown.

However when I insert it into my less file it gets converted to 120%. What am I doing wrong?

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Morten Hjort
  • 992
  • 2
  • 14
  • 28
  • 3
    Can you include the relevant CSS line? – siva.k Aug 17 '14 at 20:42
  • The full line is "padding-left: calc(100% + 20px)". Is this what you mean? – Morten Hjort Aug 17 '14 at 21:05
  • And why the negative feedback? – Morten Hjort Aug 17 '14 at 21:06
  • Is it pure css or are you using some kind of preprocessors? (I had some trouble using calc in less) Are you sure you have the necessary spaces around the plus sign in your css file? – gion_13 Aug 17 '14 at 21:15
  • I use LESS, but I did test with pure CSS and the result is the same. – Morten Hjort Aug 17 '14 at 21:16
  • @HashemQolami. Hmm no. I want to show a procentage after a div (simulating a progress bar) made with Content attribute. It places the procentage inside the bar, but when using "100% + 15px" it will display this just after the width of the div. A WIP can be seen here: http://www.cphrecmedia.dk/musikdk/stage/artistchannel-campaignpoll.php – Morten Hjort Aug 17 '14 at 22:10
  • @MortenHjort It's hard to say what's going wrong. it would help if you could provide an online demo on jsfiddle or any other online editors to demonstrate the issue in action. – Hashem Qolami Aug 17 '14 at 22:13
  • Your style sheet has a lot of unprocessed LESS stuff in there. All that should be gone once the file is online. – ralph.m Aug 17 '14 at 22:18
  • 1
    Duplicate of [Less Aggressive Compilation with CSS3 calc](https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc) – seven-phases-max Jun 14 '18 at 10:03

2 Answers2

39

Less will try to process all maths including 100% + 20px.

You could either set Strict Math on:

lessc -sm=on
lessc --strict-math=on

Or use a tilde-quote ~"100% + 20px" in order to prevent the statement from being processed by Less.

For instance:

.class {
    padding-left: calc(~"100% + 20px");
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • I did mention that I've tested it on CSS with the same result. Wherefore I did not conclude LESS was relevant, however the tilde-quote fixed it. Thanks! – Morten Hjort Aug 18 '14 at 07:03
  • Thanks for the answer. The strict-math seems the proper solution, and should have been less's default. The tilda quote (now changed to e("")) solution seems hacky, and does not cover cases such as "calc(100% - @var)" – Ram Tobolski Apr 19 '17 at 07:59
  • 1
    @RamTobolski What do you mean by `The tilda quote (now changed to e(""))`? In [LESS documentation](http://lesscss.org/functions/) it states exactly the opposite: `e: CSS escaping, replaced with ~"value" syntax.`. – Jānis Elmeris Jan 24 '18 at 07:33
  • @JānisElmeris What I wrote is what I saw in experimenting, at the time. Why don't you try and see. – Ram Tobolski Jan 24 '18 at 18:15
  • @RamTobolski It's not about trying what works and what isn't. I thought you were noting that using `e("")` is the new/preferred way of doing the same as by using `~""` before, although it seems to me it is the other way around. They both should work, at least for now. – Jānis Elmeris Jan 25 '18 at 11:05
  • @JānisElmeris I think did mean that, but I don't have the reference right now – Ram Tobolski Jan 25 '18 at 11:29
1
.class {
  padding-left: ~"calc(100% + 50px)";
}

if you have some variable defined for example 

@toolbar-height: 50px;

this can be written as below

.class {
  padding-left: ~"calc(100% + @{toolbar-height})";
}

this will not create any issue when you convert your CSS file into less

Kapilrc
  • 1,362
  • 15
  • 11
  • You can also pull the calc statement out of the string as `calc(~'100% - @{toolbar-height}');` – Trent Mar 28 '19 at 15:47