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 my old CSS.

Is there a tool that can help me to convert it automatically?

  • see my edits bellow.
    – fatnjazzy
    Oct 1, 2011 at 18:25
  • You should check @Simone Carletti's response and maybe expand on what you're really asking a little. There may be no actual "conversion" needed, beyond renaming your file.
    – Su'
    Oct 2, 2011 at 10:01
  • Interesting, but I'm wondering if it's worth to add 33KB of JS code (less.js) in order to reduce the size of CSS files. Oct 3, 2011 at 10:24
  • 1
    I'm not using the JavaScipt compiler obviously. And the size of the CSS is not the reason why I use it. Maintainability is the reason. :)
    – js-coder
    Oct 3, 2011 at 15:34

6 Answers 6


I actually found something now: http://leafo.net/lessphp/lessify/

It does a basic formating, e.g.:

#header {
/* ... */

#header p {
/* ... */


#header {
/* ... */
p {
/* ... */

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.

  • This brings up a really good point. The answers so far seem to be focused on the "convert" part of the question, doing mixins, etc. and not just whether the current file can be used in a switch to LESS workflow.
    – Su'
    Oct 2, 2011 at 9:59

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:


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

  1. If you're working with several additive CSS files, merge them into a single CSS file. This ensures everything is LESSied and optimized together.

  2. Run the resulting CSS code through an online CSS cleaning utility. I've had good results with cleancss: http://www.cleancss.com/. This will remove any extraneous and redundant markup that may not be caught by a LESS converter.

  3. 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.

  4. Paste the resulting CSS file into Least and watch the beast.

  5. Reintroduce your resets and @screen.

  6. 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.

  • Do those convertors not understand @import? I thought LESS was able to parse @import statements and consolidate all your stylesheets into a single CSS when your LESS files are compiled. It seems like dumping all of your neatly organized CSS into a single giant stylesheet in order to convert it to LESS would be a step backwards for maintainability. Apr 26, 2012 at 5:20
  • They do, but bear in mind that these tools exist online so you have to cut and paste them into a text field so it wouldn't have access to your external stylesheets.
    – ATL_DEV
    May 1, 2012 at 1:49
  • Ah, I didn't actually click the links. I'd assumed they were desktop tools. That does make sense then. May 1, 2012 at 2:42

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.

  • Agreed. There's a certain amount of inference and knowledge of your intent required here that computers just aren't very suited to. You'll be able to automate some tasks(see the link from @dotweb) and maybe consolidating things like color values into a single variable, but that's probably about it.
    – Su'
    Oct 2, 2011 at 0:15
  • Yeah, but the conversion from LESS to CSS is a 1 to 1 conversion, so there theoretically exists some algorithm that can create optimized LESS code from CSS... Someone just needs to write it.
    – trusktr
    Mar 20, 2012 at 21:22
  • Mixins can go either way, since it is easy for the computer to collect and group selectors together and nest them. Fortunately, this is the most tedious part of the conversion and this is computable (see my answer). Regardless, given the cascading nature of CSS, it may render differently from the original CSS. Variables and expressions are impossible. Computers can't determine intent or semantics. How can a computer figure out that width: 400 in CSS is actually width: pagewidth/2 in LESS? It would be possible for a converter to convert colors and fonts into variables.
    – ATL_DEV
    Apr 26, 2012 at 0:28
  • @JoelRodgers, why does the cascading nature of CSS imply that "decompilers" will be buggy? (Obviously a decompiler might be buggy, but in principle it's not hard to tell whether a reordering of terms will change the semantics). Apr 26, 2012 at 11:15
  • I'm talking about class declarations and attributes. You have to declare them in the exact same order otherwise you'll have different results. Bad mistake, I meant Nested Rules instead of mixins.
    – ATL_DEV
    May 1, 2012 at 1:57

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 http://nex-3.com/posts/96-scss-sass-is-a-css-extension which is similar to less and it has a converter tool.

  • Yep, I already thought about that. But it's a pretty big file, so I want to make sure, this will be the easiest way. ;) Think about mixins etc.
    – dotweb
    Oct 1, 2011 at 17:58
  • or you can write a really simple PHP script that handle it.
    – fatnjazzy
    Oct 1, 2011 at 17:59
  • 1
    You will not be able to find a tool that reliably converts pure CSS to using LESS mixins.
    – Alex
    Oct 1, 2011 at 18:01
  • You are right. Automatic variables and mixing are non-sense.
    – dotweb
    Oct 1, 2011 at 19:29

Try this site: css2less.cc

It converts your CSS to LESS as you type.

Not the answer you're looking for? Browse other questions tagged or ask your own question.