roborourke / wp-less

Provides a LESS compiler compatible with wp_enqueue_style() for rapid CSS development in themes and plugins.
MIT License
217 stars 55 forks source link

@include'ing from a variable? #23

Open zamoose opened 12 years ago

zamoose commented 12 years ago

Howdy.

The following doesn't seem to work:

In functions.php

function lblg_less_vars( $vars, $handle ) {
    $vars['layout'] = '3-columns-fixed-sb-right';
    return $vars;
}
add_filter( 'less_vars', 'lblg_less_vars', 10, 2 );

In the .less file:

@import "@{themeurl}/layouts/less/@{layout}.less";

This results in:

@import "http://localhost:8888/3.1/wp-content/themes/elbee-elgee/layouts/less/3-columns-fixed-sb-right.less";
.liststyle {
  list-style: none;
  margin: 0;
  padding: 0;

...etc.

What am I doing wrong? Is this even possible?

franz-josef-kaiser commented 12 years ago

Maybe you should start explaining what you're expecting to happen? Hard to guess from

The following doesn't seem to work

Hint: "doesn't work" is in nearly 99% of all cases too less.

P.s.: If the 3.1 says, that you're using WP version 3.1... then you should update.

roborourke commented 12 years ago

Can you tell us whether you get an error message, or whether the parsed file still contains the unmodified line you included?

Because @import behaves a bit differently in less it might not be parsed as expected along with the rest of the file. I'll check with @leafo

zamoose commented 12 years ago

@franz-josef-kaiser I guess I wasn't as descriptive as possible.

@sanchothefat No error messages. Let me describe to you what I'm going for. I want to have a "master" LESS file that gets parsed and I want to include other files along the way. However, I have layouts and styling separated out so that users can choose 1, 2 or 3 columns, percentage, fixed width, etc. So, using @-variables, I'd like to be able to include different layout .less files on-the-fly. If this was working, e.g. @include @{layout}.less would actually import the contents of layout.less and render the CSS. Instead, the @import statement is itself rendered into the final CSS.

Make sense?

zamoose commented 12 years ago

Actually, this upstream issue describes what I'm going for as well: https://github.com/leafo/lessphp/issues/328

roborourke commented 12 years ago

Yep, this is something that would have to go into lessphp so I can't fix it here.

There is another way you might be able to do it though using pattern matching or guarded mixins:

// css/LESS
.layout(@layout) when (@layout = 2-column) {
    @import "2-column";
}
.layout(@layout) when (@layout = 3-column) {
    @import "3-column";
}
.layout(@layout);

I've not tested the above but it might be a starting point. It might be that less parses and prefetches the contents of any imported files before parsing the thing as a whole. I'm not too familiar with the inner workings unfortunately of lessphp :/

Let me if it works!

roborourke commented 11 years ago

I've just updated to 0.3.8 - can you try out your use case again?

roborourke commented 11 years ago

Just tested this and it doesn't appear to work :(

franz-josef-kaiser commented 11 years ago

I'm not too familiar with the inner workings unfortunately of lessphp :/

Who is? It's uncommented crap without proper DocBlocks :) For some of the earlier patch, I did the debug from the inner side of the submodule, but the internal calls go back and forth, so don't blame yourself.

@see https://github.com/leafo/lessphp/issues/332