My quest for awesome css

I was stunned when I discovered the existence of the calc method in CSS. Finally a way to express relative widths!

Instead of tackling the issue of ‘define width as 100% minus some amount of pixels’ by implementing some ugly hacks (javascript or wrapping everything into several divs, also called ‘divitis’) I could finally implement it in a clean way!

By using the calc function in CSS you can write something like calc(100% – 18px).

I added that to my LESS file and LESS seemed to ignore it because it can also handle expressions itself. So the CSS output was calc(82%) 😦

That disappointed but didn’t demotivate me so I continued my quest and I could also fix that – thanks to Google – by finding a way to escape stuff with LESS. Writing calc(~“100% – 18px”) should result in calc(100% – 18px) in CSS.

Uhu, SHOULD indeed! The LESS to CSS compiler from twitter – recess – we use here ignores the escaping (for the record, lessc doesn’t seem to)… Bummer!

And then again – Google to the rescue – I found the solution to my final problem! A patch for recess. I hope they’ll fix it in a future version of recess but for now the patch satisfies my needs.

I suggest you to patch recess too! How? Well uhm,…

• First try to find where recess is installed. If it’s installed via npm it should be installed in C:\Users\<username>\AppData\Roaming\npm\node_modules\recess\lib (<username> = your username on your pc). 
• Then open the file core.js in an editor.
• Next, find the comment with the typo: // iterate over defintions and compress them (join with new lines)
• The line below should be: css = this.definitions.map(function (def) { 
• Replace this by css = this.parsed ? that.data : this.definitions.map(function (def) {
• Save your file and yup you fixed it!