Over a million developers have joined DZone.

My quest for awesome css

· Web Dev Zone

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!
Topics:

Published at DZone with permission of Glenn Dejaeger, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}