: Is there a tool that converts css to less.css? I have a pretty big CSS file, that I want to convert to less. When I wrote the CSS I did not know less.css, but now I still want to use

@Harper822

Try this site: css2less.cc

It converts your CSS to LESS as you type.

Vote Up Vote Down

@Lee4591628

Have you looked at Least? It's much better at converting CSS than Lessify. In particular, Lessify doesn't optimize your classes very well. It copied the browser resets to all its generated mixins, creating redundant attributes. It's clear that it's still at the experimental stage. Neither utilities can determine semantics, so they can't convert values to expressions, vars, or parametric mixins.

Least does a better job of optimization and seems to be more functional. It even handles pseudoclasses for you:
toki-woki.net/p/least/
These tools are ideal for working with large preexisting CSS files. Here are the steps I recommend to convert CSS to LESS (Make sure you keep a copy of the original CSS files):


If you're working with several additive CSS files, merge them into a single CSS file. This ensures everything is LESSied and optimized together.
Run the resulting CSS code through an online CSS cleaning utility. I've had good results with cleancss: www.cleancss.com/. This will remove any extraneous and redundant markup that may not be caught by a LESS converter.
Remove @Media and any style resets you have in the CSS file. They may create problems or introduce possible redundancies. It's probably a good idea to keep the resets in a separate file.
Paste the resulting CSS file into Least and watch the beast.
Reintroduce your resets and @screen .
Now that you're done, go through each of the attributes and find good candidates for refactoring and turn them into LESS variables and expressions. CSS color and font attributes are the easiest ones to factor out, simple global search and replace works fine. At the end, you can decide whether you want to break up the single file into smaller logical files. You may find that the process causes you to reorganize your files in a different way.


I am not the author of Least, just someone looking for a similar tool and decided to tell the world about it.

Vote Up Vote Down

@Cugini213

Actually, you don't need any conversion tool to start working with LESS. LESS syntax is backwards compatible with CSS. It means any CSS file is also valid LESS file.

Simply get your CSS and rename it to a LESS file. Then use LESS-specific features along with your changes. The more you'll update the file, the more you'll be able to use LESS features.

I did the same for SCSS and a very big project with 10 CSS files. It was almost impossible (and a huge waste of time) to rewrite all CSS with SCSS. I simply renamed it, then every time I was working on the CSS file, I executed small refactoring on the code to take advantage of mixins, variables and so on.

Vote Up Vote Down

@Ogunnowo487

I actually found something now: leafo.net/lessphp/lessify/
It does a basic formating, e.g.:
#header {
/* ... */
}
#header p {
/* ... */
}


to
#header {
/* ... */
p {
/* ... */
}
}

Vote Up Vote Down

@Carla537

I don't think there is any way for a converter to know what you want to do with much of the code.

For instance, it wouldn't necessarily know what variables you wanted to use. Or how to generate mixins or functions.

I think with this one you will need to do it manually.

Vote Up Vote Down

@Shelley277

How about search and replace.

if you have color:#ffffff and you want to change it to @color

just search color:#ffffff or color : #ffffff and replace with @color .

I usually don't trust these tools.

or you can write a really simple PHP script that handle it.

Update 1:
Or you can user the nex-3.com/posts/96-scss-sass-is-a-css-extension which is similar to less and it has a converter tool.

Vote Up Vote Down