I've long wanted a way for my subtheme to be able to include a LESS mixin library from the base theme.

This patch gives the ability to write, e.g.

@import base-theme-url("css/base.less");

in order to import base theme LESS into your subtheme. I haven't yet tested it in other contexts, but it should work just as well for background-image: base-theme-url("images/foo.png"), too.

(Patch will be in first comment.)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

adamdicarlo’s picture

FileSize
2.08 KB

Here's the patch.

adamdicarlo’s picture

FileSize
2.13 KB

Realized there was a nasty bug in there that would cause failure for parentless themes (non-subthemes).

This new version should fix that problem.

corey.aufang’s picture

Does your code take into account that your theme's base theme might have a base theme of its own?

adamdicarlo’s picture

No -- would it need to? The intention was to be able to reach up to the direct parent theme's directory. Maybe it should be "parent-theme-url" instead. Any other thoughts or ideas?

Thanks.

corey.aufang’s picture

Yes, the code needs to handle multiple parents.

If you access a property in the parent theme that itself references it's own parent, then you need to have that workable.

So really we need to make sure that the code can fully work its way up the theme hierarchy.

adamdicarlo’s picture

Ah, interesting point. I'm not sure exactly how to implement that, off the top of my head. Could be really tricky (you'll notice my patch is a bit tricky already).

Honestly, I'm thinking this patch may have been inspired by overly-ivory-tower reusability/DRY thinking. Hmmm. I'm not sure this is worth the effort. It'd just save copying my "base" LESS library file when making each subtheme, that's about it, and occasionally, forking the base library is necessary anyway.

Somewhat related digression: It actually might be more useful for a *base theme* to be able to be abstract -- and let/require the subtheme to set parameters (like sidebar/page widths, link colors, etc.). But that's suuuch a huge can of worms in terms of the amount of design/planning needed, and implementation wouldn't be peachy either.

corey.aufang’s picture

Version: 6.x-2.x-dev » 6.x-3.x-dev

moving to 3.x

timoti’s picture

Issue tags: +CSS, +theming, +LESS, +base theme, +child theme

I have (I think) a curlier question - is it, or would it be possible to @import a subthemes mixin/variable library into the base theme?

Currently i have to override/replace most of my base theme in order to apply brand style. IT would be great if I could retain most of the base theme style, but have it import key brand style variables from the child theme, for each respect site, which i guess would require outputing extra css files in the files/less/sites dir?

or something like that.
I have no php skill so sorry can't offer a patch.
But it would be very cool if something like this were possible

corey.aufang’s picture

If you always know that your base theme and sub theme are going to have the same parent directory, you could just include any parent theme's .less files using relative paths.

corey.aufang’s picture

Status: Active » Postponed

Setting as postponed until v3.

attiks’s picture

You can have a look at #1433948: Add support for theme settings and custom PHP functions, it allows you to define custom functions for Less (versions >= 03.1), see also http://leafo.net/lessphp/docs/index.html#custom_functions

So it would be possible to define a function to return the paths.

corey.aufang’s picture

Not using the functionality that your pointing to.

When compiling a file in Drupal, its placed in a folder that is not the same as the source so the path must be full from the basepath.

LESS does not do any actions on the paths that are in source files when compiled, so this is something that has to be taken care of in the module before passing over to the class library.

I have some code that I've been working on, its just complicated and taking time to work the kinks out as it has to take into account full theme path recursion.

diegohermes’s picture

Any update about that in the 7x release? I couldn't find any new info in the documentation.

corey.aufang’s picture

I just created a documentation page to cover the Variables and Functions functionality that has been added to 7.x-3.0 version.

You can view the documentation page here https://drupal.org/node/2139603.

Its mainly a rehash of the of the documentation in the README.txt included with the module.

markus_petrux’s picture

Issue summary: View changes

Hi,

It would be nice if there was a drupal_alter('less', $less). Then any module could use $less->addImportDir() to add paths that may contain reusable LESS stuff like mixins, etc. These reusable LESS files could then be included by name.

Patching less.module:

         $less = new lessc();
+        drupal_alter('less', $less);

My module or theme could do:

function MYMODULE_less_alter($less) {
  $less->addImportDir(drupal_get_path('module', 'MYMODULE'));
}

My .less files (any .less file, from any module or theme) could do:

@import "mixins.less";

.rounded {
  .border-radius(5px);
}

Temporarily, I did something like this using a custom less funcion, which can be added using hook_less_functions_alter(). LESS passes $less itself as a second argument, so it can be used to invoke the addImportDir() method and return the full filename of a less file, one that provides my reusable less stuff. I'm using this function from my .less files like this:

@import my-less-stuff();

.rounded {
  .border-radius(5px);
}

Cheers

corey.aufang’s picture

Version: 6.x-3.x-dev » 7.x-3.x-dev

That would be a good idea, but with a slight change.

I think that adding import paths to the file array associated with a particular .less file, through an alter, would allow for nifty things.

If its made generic enough then the import paths would also work with less.js server side which support for is coming in the next release of 7.x-3.x.

You could also speicify in the .info file import paths, within the module/theme, that you want automatically applied to all .less files that are associated with that module/theme.

And looking at it as just adding import paths then we could possibly have the full parent theme chain of paths added automatically, tho that would need consideration. Maybe the parent themes parent folder so that you would have to specify the theme name specifically to include the file inside. Or something.

What do you think?

corey.aufang’s picture

Title: Patch: Add ability to reference/import base theme stylesheets/files » add import paths
Status: Postponed » Needs work

Ok, so I'm thinking that the hook is a good idea, but the parent theme path should not be automatically added, otherwise which file is imported could be ambiguous.

Maybe possibly add an option for .info files that allows reference to another module/theme/library to be added to import paths for this item.

  • Commit 8677b00 on 7.x-3.x by corey.aufang:
    Issue #2003628 by corey.aufang: lessjs is now run through a class....

  • Commit 8677b00 on 7.x-3.x, 7.x-4.x by corey.aufang:
    Issue #2003628 by corey.aufang: lessjs is now run through a class....
corey.aufang’s picture

Version: 7.x-3.x-dev » 7.x-4.x-dev
Status: Needs work » Needs review

There is now the ability to add paths to the import lookup.

Any feedback would be appreciated.

The last submitted patch, 1: less.988552-1.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 2: less.988552-2.patch, failed testing.

corey.aufang’s picture

Status: Needs work » Needs review
corey.aufang’s picture

Status: Needs review » Fixed

Marking as fixed as 7.x-4.0 will be released soon.

Documentation for path hooks are available in less.api.php.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.