How to rewrite code in less?

Question

css

I don’t remember where, but I uploaded a link to a beautiful underline - codepen.io/ghepting/pen/tLnHK
But I myself can hardly rewrite everything to less, also finding a replacement for the compass functions.
Can you help me figure it out?
Well, since I got in, I can’t figure out how else to make a fallback to a normal underline for older browsers.

Answer 1

All the salt is in these two lines:

text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #333333 2px, #333333 3px, rgba(0, 0, 0, 0) 3px);

This is the final CSS that actually adds that very underlining and makes it possible for the text to override it to look prettier. The variable $breaking-underlines decides whether to add text-shadow or not.
In fact, you only need to implement the mixin that generates this very linear-gradient:
codepen.io/anon/pen/cIxtg - changed to my moner. Can someone tell me which is better.