Conver css to less with css2less.js

Convert old ugly css to new fresh less, that is simple!

I have some old projects with old css which I would like to move to less. After some research I have found this project: The best solution so far.

So, what I did? I converted the library from Ruby into JavaScript and improved it a little bit. At least somewhere I used my poor Ruby skills.

What I improved:

  1. Add nesting for pseudo-selectors such as :active, :hover
  2. Fix fail error if any of style blocks are empty, for example { }
  3. Add some more parameters to customize output less

css2less.js depends only on linq.js library, which was also written by me. You can download both of them for free.

Try it online, right here!


Input your old css here

Take your new less here

Views: 99935 Comments: 14
Carlos on 16 October 2013 10:50 says

I updated your code to create variables for more selectors & to use the selectors to generate variable names. Also some bug fixes. If you want to get my updates then they are on github:

Thanks for putting your version out there, it's very useful.


Const on 17 October 2013 10:24 says

Hi Carlos. I am glad to know that it was useful for you. I will take your updated script for sure.

Peter on 15 January 2014 12:57 says

Hi, great tool I use this a lot. Any chance you could maybe add an option to split properties and values?

So that this: display:block; Becomes display: block;

This is purely for readability.

Const on 16 January 2014 12:02 says

Peter, hi. I have made the option for you. Check it out. You can choose between ": " and ":".

Harry on 17 March 2014 15:20 says

Shouldn't pseudoclasses like :hover be prefixed with an ampersand (&). I.e. &:hover{ //hover styles } else LESS compiles :hover as a child of a.

So you get: a :hover{ //hover styles }

rather than a:hover{ //hover styles }

Const on 17 March 2014 20:40 says

Harry, hello. Thanks for your comment, I have fixed the bug.

Andree on 30 May 2014 17:53 says

Hello Const,

very very nice script! Much better than the other online-css2less-generators. What about media-queries? A CSS-Snippet like this:

@media (min-width: 992px) { header { height: auto;



... will fail.

Another point: I love a more compressed (but still good readable) less-format like this: @color0: green; @color1: lime;

a {color: @color0;text-decoration: none; &:hover {color: @color1;} &:active {text-decoration: underline; li {text-decoration: underline;} } }

I hardcoded this kind of formating. Maybe you want to make it available in the settings.

Andree on 30 May 2014 17:56 says

here's the formated version ;)

wait on 07 September 2014 19:26 says

failing with

a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
Const on 08 September 2014 12:50 says

Hey, thanks for pointing that up. I have fixed the bug.

NinjaCross on 15 July 2015 16:19 says

Nice tool. Unfortunately it doesn't correctly handle classes like this:

#KmsItemNameTitleTools button
padding: 0px !important;
  border: 1px solid #efc300 !important;
  background: #ffbe00 !important;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)  !important;
  background: -moz-linear-gradient(top,#ffbe00 0,#ff9400 100%)  !important;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffbe00),color-stop(100%,#ff9400)) !important;
  background: -webkit-linear-gradient(top,#ffbe00 0,#ff9400 100%) !important;
  background: -o-linear-gradient(top,#ffbe00 0,#ff9400 100%) !important;
  background: -ms-linear-gradient(top,#ffbe00 0,#ff9400 100%) !important;
  background: linear-gradient(to bottom,#ffbe00 0,#ff9400 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbe00',endColorstr='#ff9400',GradientType=0) !important;
Gabriel on 20 December 2017 21:32 says

Obrigado! Eu só quero dizer.

база технических условий on 09 February 2021 00:15 says

Woah! I'm really digging the template/theme of this blog. It's simple, yet effective. A lot of times it's difficult to get that "perfect balance" between user friendliness and visual appeal. I must say you have done a excellent job with this. Additionally, the blog loads super quick for me on Chrome. Exceptional Blog!

buy xanax online without rx on 17 February 2021 09:55 says

I've been exploring for a bit for any high quality articles or blog posts in this sort of space . Exploring in Yahoo I at last stumbled upon this web site. Reading this info So i'm glad to show that I've a very good uncanny feeling I discovered just what I needed. I such a lot without a doubt will make sure to do not forget this site and give it a look regularly.

It's sad to say, but..
Due to the enormous amount of spam I have decided to disable comments on my website. Feel free to contact me through any other available channel.