Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

My quest for awesome css

DZone's Guide to

My quest for awesome css

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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!

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

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 DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}