Add import support

[freewind]

This doesn't work:

@import "common";

It's not support yet?

[jryans]

That's correct, currently imports are not available. Is this the only thing blocking you from using this library? I can investigate how hard it might be to add.

[freewind]

Yes, "import" is very important to reuse some css libraries( like 960.gs, blueprint ). I'm using lesscss now, which works, but very slow.

[jryans]

Okay, I can take a look later today. Do you need any of the other currently unsupported features (math operations, accessors), or just imports?

[freewind]

I don't know yet. Since the @import is not working, my less files can't be parsing. But I did used some thing like:

/**
 * A LessCSS version of the 960 Grid System
 *
 * http://lesscss.org/
 * http://960.gs/
 */
/*********************************************************************
 * Settings                                                          *
 *********************************************************************/

/* Maximum width of the document
 ********************************/
@document_width: 1200px;

/* The gutter width
 ********************************/

@gutter: 20px;
@gutter_left: 0px;

/* Number of columns
 ********************************/

@columns: 12;

/*********************************************************************
 * Container                                                         *
 *********************************************************************/

.container() {
    width: @document_width;
    margin-left:auto;
    margin-right:auto;
}

/*********************************************************************
 * Grid                                                              *
 *********************************************************************/

@column_width: (@document_width - @gutter * @columns) / @columns;

.grid(@col:1, @change:0) {
    width: (@column_width + ((@col - 1) * (@column_width + @gutter))) + @change;
    display:inline;
    float: left;
    position: relative;
    margin-left: @gutter_left;
    margin-right: @gutter - @gutter_left;
}

[freewind]

To implement @import is not hard, since official "less.js" implements it very simple: When there is a @import, include the content of that file directly. No dependency checking, cycle reference checking, or any other handling. Just include them.

[jryans]

Yes, it certainly is not hard. :) We just haven't needed it yet. I'll take a look to see how hard these will be to add.

[freewind]

Actually, I made a eclipse plugin. When I write in a less file, it will be converted to a css file at the same time :)

[jryans]

Ah, okay, well this project is a good fit for you then. I would expect ~50ms translation time for a normal sized file.

[freewind]

Thank you, I will watching it

[jryans]

I hope to work on these issues later this week. Would you expect LESS files using @import to maintain an @import in the output, or to produce a single large CSS file with the concatenated output from any imports?

[freewind]

I found it not that simple for @import. It's not just include that file, but also handle the invocation of methods defined in that file. For example, lib.less:

.grid(@col:1) { ... }

It's a method. It should be called and calculated and render the result, not the method itself.

So I think it will be difficult to implement a full less standard.

Or just keep it simple? Not implement those?

[jryans]

Looking at official less, they appear to always output a single file, so I will plan to do so as well. Mixin usage from imported files should not be too hard to achieve.

[jryans]

Another developer at our company is currently rewriting this parser, bringing it more inline with less.js. This make take a bit more time to resolve your issue, but should set us on a better path towards full compatibility.