@Import of Less Files into a Limited Scope

@Import of less files into a limited scope

According to the css-spec, the @import-declaration has to come before all other declarations in the css-file. So your @import inside the rule is expected to fail. I guess the @importing at the end of the file not failing is goodwill of the browser-vendors.

I guess LESS will abide by the same rules.

EDIT:
the question is, why do you want to have those styles scoped? With proper declarations, this should not be necessary.

Why can't I import .less files into a single .less file?

I just tried this on my local environment, putting vars into vars.less and mixins into conf.less. The file structure similar to yours, with the base .less file a level below the folder containing all the 'includes'.

So I had css folder which had my main.less file and then css/less/vars.less | conf.less

To import both of those:

@import "less/vars.less";
@import "less/conf.less";

My only answer is to remove the first / in your @import statement. I had similar problems when trying to import a google font into my .less file.

Worth a shot at least, because using the same structure as yours mine is working.

LESS.js - Can only import one .less file

I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.

Trouble importing LESS files among different domains

I've managed to solve my problem. In case anyone else is having this trouble, I will describe what I did: apparently, while you can't reference variables that weren't defined, you can reference plugins that were not defined (in those cases, they are identified as strings).

So I added that before the less.min.js line in the B domain HTML file:

<script>
less = {plugins: [{
    install: function(less, pluginManager, functions) {
        functions.add('getRootLessFolder', function() {
            var getDomain = function() {
                return window.location.protocol + "//" + window.location.host + "/";
            }
            return getDomain() + "less/";
        });
    }
}]}
</script>

And updated the @imports in A to be like that:

@root-less-folder: getRootLessFolder();
@import (optional) "@{root-less-folder}module1/less";

So when getRootLessFolder is defined, the path is based in its returned value, and when it isn't, the path is "getRootLessFolder()module1/less", which will return a 404, but since it's an optional @import, that won't be a problem.

So if server B is updated, the change in server A is going to work. In case server B is not updated, the change is server A won't break it either.

LESS: Nested Import In Class

It is possible in Less (not sure about exact version but most likely since 1.5.x), like this:

@black: #333;
@import "layout";

.fanshop {
    @black: #111;
    @import (multiple) "layout";
}

But that won't work in lessphp since it's somewhat behind Less 1.4.x. You could try less.php instead.

---

Related Topics