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: 15596 Comments: 23
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


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


Zachezycok on 16 February 2017 04:40 says

viagra blogs - viagra without prescription

viagra 5mg canada no new posts

viagra without a doctor prescription

- please welcome our newest member: viagra

buy viagra online registered users

JezrySof on 24 October 2017 16:15 says

free viagra - viagra without prescription

canadian pharmacies viagra soft

viagra without prescription

- viagra risks

viagra 20 mg 4 tablet log in

internal grinding machine on 26 October 2017 05:09 says

I wanted to thank you for this great read!!

I certainly enjoyed every little bit of it.

I have got you bookmarked to check out new things you post…

JamesSeery on 26 October 2017 13:03 says - generic viagra generic viagra india generic viagra reviews generic viagra north carolina

WilliamSug on 26 October 2017 13:05 says - canadian pharmacy viagra canadian pharmacy generic viagra canadian viagra pills online canadian pharmacy viagra

Harolddeawl on 26 October 2017 13:07 says - viagra over the counter walmart viagra over the counter cvs over the counter viagra substitute cvs viagra in mexico over the counter

MyrongeasK on 08 November 2017 02:05 says - does generic viagra work buy generic viagra generic viagra 50mg marley generic viagra

MyrongeasK on 08 November 2017 02:05 says - what happens when a female takes viagra new female viagra what is female viagra female viagra new

MyrongeasK on 08 November 2017 03:27 says - viagra generic online online viagra cheapest viagra online buy viagra online

chip satışı on 11 November 2017 00:25 says

chip satışı

buy montelukast online on 15 November 2017 00:56 says

Cool blog! Is your theme custom made or did you download it from somewhere?

A theme like yours with a few simple adjustements would really make my blog shine.

Please let me know where you got your theme. Kudos

levothyroxine price on 20 November 2017 02:44 says

When I originally commented I clicked the "Notify me when new comments are added" checkbox and

now each time a comment is added I get three emails with the same comment.

Is there any way you can remove me from that service? Thank you!