@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 @import
ing 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
Why Won't Opera (11.00) Display Custom (@Font-Face) Fonts
How to Restrict Character Limit by Line or # of Characters with CSS
Chrome Devtools Converts All Hex Colors to Rgb
Half Pixel in Border Width Size It Is Not Showing
How to Position a Dropdown at Cursor Position Inside a Textarea
How to Get My Page Headers to Resize Using Responsive Layout
Change Default Font in Semantic-Ui with @Font-Face
Input Groups Bigger Than Input in Bootstrap 3 Using Jumbotron Container
Ems to Pixel Conversion - Why 62.5% and Not 6.25%
Body { Font-Size: 100.01%; } Vs Body { Font-Size: 100%; }
Different Levels of CSS and The Priority Over Each Other
How to Get a Custom Scroll in Firefox and Ie
Can Visual Studio 2013 Generate CSS Files from .Less Files
Remove All Borders on a Specific Datatable
Browser-Specific Prefixes with a CSS Transition on Transform