Jump to content

Archived

This topic is now archived and is closed to further replies.

glennyboy

Import Less into style.less from Child Theme

Recommended Posts

glennyboy

Hi 

 

Can someone please let me know how to import a less file (in folder) into the main style.less file within a Child Theme. The import for style.css seems to be:-

@import url("../theme-name/css/animate.css") 

and I have found that import of less is apparently possible, but it crashes/doesn't work:-

 

less import css:-

@import (less) "styles.css";

import less

@import "less/vars.less"; 

Perhaps the syntax above is wrong for DMS?

 

Thanks

Glennyboy

 

Share this post


Link to post
Share on other sites
Simon

Im not entirely sure it will work, the PHP LESS compiler will look in its own dir for your less file.

 

Why not just add all your LESS code to style.less, it should just be picked up anyway.

Share this post


Link to post
Share on other sites
glennyboy

Purely as I wanted to keep animate.css/less separate as its own entity. Is there any way to tell the less compiler to look in a child theme location - functions.php?

Share this post


Link to post
Share on other sites
chamois_blanc

Do @import statement not work in style.less?

Share this post


Link to post
Share on other sites
Danny

As far as I am aware @import does not working in style.less. However, I am not sure why you would want to use @import anyway, just include your less in the style.less file to begin with?

 

You shouldn't really use @import to begin with anyway, read this article for more info - http://www.stevesouders.com/blog/2009/04/09/dont-use-import/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy

Danny Pagelines use multiple less files so why do you think we should;t want to do the same?

Share this post


Link to post
Share on other sites
Simon

you will need the full absolute path to the file. Even then it might not work.

 

we use multiple less files yes, but they are concatenated by php then pulled into the less compiler as one chunk, there are no imports.

Share this post


Link to post
Share on other sites
Danny

Danny Pagelines use multiple less files so why do you think we should;t want to do the same?

 

As Simon suggestion above, also we have literally thousands of lines of LESS CSS, which is why breaking them into individual files for specific things like buttons.less, variable.less etc... makes sense. I can not imagine for the life of me, anyone would be editing DMS to that degree, which is why using separate files for small snippets is pointless and you shouldn't use @import.

If you want to manage your code in away that is easy to read, use comments. For example:

 

/* This styles the Masthead section with a red backgorund */
.section-masthead {
  ...
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chamois_blanc

Hi Danny,

 

My style.less file currently has 1300+ lines. Some of it is plugin related. It would be so much easier if I could separate the code into multiple files and have them all come together to generate a single css file. I had thought that the people who designed less had a good amount of common sense and would have included an "include" type function. It's pretty basic to good programming and file system organization. Long files hide structure by essence. This would potentially also make the code more portable from website to website. So I don't think the problem is really related to DMS for what I'm trying to achieve.

 

One thing I see is that import statements are passed as is, that is if I do:

 

   @import "bla.less";

   <less code>

   @import "foo.less";

 

It will appear as follows in the generated css:

 

   @import "bla.less";

   @import "foo.less";

   <css code>

 

which obviously won't work. So less imports are not supported by DMS. And that's also weird, but it wouldn't help me much with what I'm trying to achieve. It would be neat if DMS could support an include statement in the less files it processes. But I guess if I were you, I would probably not implement it because it's not native less and you probably do not want to change the language. Another possibility would be to allow the user to specify a less file list that DMS would concatenate and process together, the same way you're doing it for your internal files.

 

Gilles

Share this post


Link to post
Share on other sites
paulzz1

Hi Danny

 

Odd that a standard feature of LESS, the foundation behind Bootstrap, and therefore, DMS, causes problems in a child theme. I have dozens of supporting LESS files that get compiled into one CSS. I would have a LESS file of many, many thousands of lines if I did as you suggest. Very hard to organise and navigate.

 

The link you provide above slating imports is css specific and has nothing to do with the pre-compilation of multiple LESS files into a single CSS file.

 

When I compile my LESS files (via CodeKit) it outputs a CSS file with everything in it. The theme then accesses the CSS, not the LESS file directly. However, by using @import in my child theme's LESS file, it causes a problem in the main parent DMS folder. One shouldn't affect the other but, as I've said below, in Chrome it causes a loading problem for looking in the wrong place for my LESS files. Which is redundant as the CSS contains all of the LESS used.

 

For reference, below is copied my initial question which I posted elsewhere before being told there was a thread open...

 

Thanks

 

Paul

 

 

Hi

 

I'm having problems adding the more-or-less mixin library (or, indeed, any other LESS libraries) to my child themes.

 

When I add it to my child theme in 'themes/mytheme/less/ I can access the mixin in my stylesheet and they work fine but in Chrome I get:

 

"Failed to load resource: the server responded with a status of 404 (Not Found)"

 

It's looking for it in:

 

http://mydomain.com/...ines/_more.less

 

This is, obviously, causing some load problems.

 

In my LESS file, I have:

 

@import "_more.less";

 

at the very top.

 

That files exists in my child theme folder.

 

That file simply calls:

 

@import 'less/_export';

 

which then imports a load of other files.

 

Any ideas?

 

Thanks

 

Paul

Share this post


Link to post
Share on other sites
Buishi

Just adding my voice to the chorus: it would be great if we could have multiple less files in a child theme. One simple way to do it would be to automatically compile any less files in the /less folder, as already works with overriding theme files. I'm sure whatever script it is that compiles them could loop through the contents of the folder, no?

 

Anyway, juts having less at all is a blessing, so thanks guys!

Share this post


Link to post
Share on other sites

  • Similar Content

    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, could you let me know where the custom less/css is saved to - i.e. how I could access it directly via the server.
      I hid the Admin Bar by mistake and now can't save any changes to the Custom CSS as the Save Button is not available - so I need to find another way to access and edit the custom CSS.
      Thanks in advance
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • Audun MB
      By Audun MB+
      How do I get the LESS in a child theme to compile?
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • dymond
      By dymond+
      I've been trying to upload a video to use as a video background, but the size was 12m, and the alotted max file size is 8m. I downloaded a couple of pugins that increase the size by creating php.ini files and all of that jazz, but to no avail. It would say (Max file size = 250mb) but after I uploaded I would get an "HTTP ERROR",
      Soooo I logged into my cpanel and saw that the php I was using was 4 version out of date. I upgraded my php to PHP 5.6 and now I get
      Fatal error: Out of memory (allocated 39583744) (tried to allocate 15 bytes) in /homepages/39/d200014696/htdocs/dymondentertainment.com/wp-content/themes/dms/dms/includes/less.plugin.php on line 848
      When I activiate another theme that is not pagleines, the site works fine.... but will no longer work with Pagelines DMS Version 2.2
       
      My site has no gone dark. What can I do?
×