Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

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

This question came from our site for professional and enthusiast programmers.

    
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. :) –  js-coder Oct 3 '11 at 15:34

6 Answers 6

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

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 '12 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 '12 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 '12 at 2:42

Try this site: css2less.cc

It converts your CSS to LESS as you type.

share|improve this answer

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
up vote 13 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 '12 at 21:23

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

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 '12 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 '12 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 '12 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 '12 at 1:57

protected by John Conde Sep 12 '12 at 16:53

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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