up vote 13 down vote favorite
6

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?

share|improve this question
see my edits bellow. – fatnjazzy Oct 1 '11 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 '11 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. – Marco Demaio Oct 3 '11 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. :) – dotweb Oct 3 '11 at 15:34
feedback

migrated from stackoverflow.com Oct 1 '11 at 23:46

7 Answers

up vote 8 down vote accepted

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

It does a basic formating, e.g.:

#header {
/* ... */
}

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

to

#header {
/* ... */
p {
/* ... */
}
}
share|improve this answer
wow, nice.!!!!! – trusktr Mar 20 at 21:23
feedback
up vote 8 down vote

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.

share|improve this answer
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 '11 at 9:59
feedback
up vote 5 down vote

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.

share|improve this answer
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 '11 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 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. – Joel Rodgers Apr 26 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). – Peter Taylor Apr 26 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. – Joel Rodgers May 1 at 1:57
feedback
up vote 2 down vote

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.

share|improve this answer
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 '11 at 17:58
or you can write a really simple PHP script that handle it. – fatnjazzy Oct 1 '11 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 '11 at 18:01
You are right. Automatic variables and mixing are non-sense. – dotweb Oct 1 '11 at 19:29
feedback
up vote 2 down vote

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:

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

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

share|improve this answer
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. – Lèse majesté Apr 26 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. – Joel Rodgers May 1 at 1:49
Ah, I didn't actually click the links. I'd assumed they were desktop tools. That does make sense then. – Lèse majesté May 1 at 2:42
feedback
up vote 0 down vote

Try this site: css2less.cc

It converts your CSS to LESS as you type.

share|improve this answer
feedback
up vote -2 down vote

The Minify CSS tools listed to the right give any users easy one click CSS compression. Just copy and paste your code into their online CSS compression tool form box, click submit, and seconds later you will have the same fully functioning CSS code... Just dramatically shrunk in bytes size..

100% FREE - Compression and minification tools

Click here to download http://www.minifycss.com/css-compressor/

share|improve this answer
2  
-1 This is not at all what was requested. – Su' Jun 12 at 5:08
i think question about minify css and my answer is related to this.. – Rizwanabbasi Jun 12 at 5:10
@Rizwanabbasi The question was about converting CSS to LESS, not about minifying CSS. – dotweb Jul 2 at 11:32
feedback

protected by John Conde♦ Sep 12 at 16:53

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.

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