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: https://github.com/thomaspierson/libcss2less. 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 a.link { }
  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!

Parameters

Input your old css here

Take your new less here

Views: 6838 Comments: 12
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: https://github.com/CarlosOnline/Css2LessAgain

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

Thanks,
Carlos

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

http://jsfiddle.net/3NbKp/

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

http://viagra-withoutadoctorprescriptions.org - 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