Как переписать код на less?

Question

[Rrooom]

Не помню уже где, но затарил ссылку на красивое подчеркивание - codepen.io/ghepting/pen/tLnHK

Но мне самому слабо переписать все на less, еще и найдя замену функциям компаса.
Поможете разобраться?

Ну и раз уж залез, не могу придумать, как еще сделать фолбэк до обычного подчеркивания для старых браузеров.

Answer 1

[Сергей Протько]

Вся соль вот в этих двух строчках:

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);

Это итоговый CSS который собственно и добавляет это самое подчеркивание и делает возможным тексту перекрыть его что бы выглядеть симпатишнее. Добавлять text-shadow или нет решает переменная $breaking-underlines

По сути вам нужно реализовать только миксин который генерирует этот самый linear-gradient:

codepen.io/anon/pen/cIxtg - переделал на свой монер. Может кто подскажет как лучше.