是否可以让LESS解析器在链接标记中的多个LESS文件之间创建共享作用域? [英] Is it possible to get the LESS parser to create a shared scope across multiple LESS files in link tags?

问题描述

抱歉，我的措辞令人恐惧.

Sorry for the horrible question wording, let me explain.

对于我正在处理的项目，我想管理服务器上我的LESS文件的各种依赖关系.由于项目的结构方式(不同的组件以不同的方式符号链接)，因此仅使用@import来构建依赖项等会受到更大的限制.

For a project I'm working on, I'd like to manage various dependencies for my LESS files on the server. Because of the way the project is structured (different components symlinked in different ways), it's much more limiting to just use @import to build dependencies etc.

理想情况下，我想在此部分中吐出所需的LESS文件列表，例如:

Ideally I'd like to just spit out a list of required LESS files in the section, e.g.:

<link rel='stylesheet/less' href='/path/to/some/file.less' type='text/css' media='all' />
<link rel='stylesheet/less' href='/path/to/some/other-file.less' type='text/css' media='all' />

然后，例如，如果在file.less中定义了变量或混合，那么我希望能够在other-file.less中使用它.

Then, for example, if a variable or mixin is defined in file.less, I'd like to be able to use it in other-file.less.

据我所知，这是行不通的.每个LESS文件似乎都存在于其自己的范围内，其中一个变量等在另一个文件中不可用.

From what I can tell, that doesn't work. Each LESS file seems to exist in its own scope and variables etc in one are not available in the other.

这是正确的吗?范围是否完全限于单个文件及其中的任何@imports?我可以肯定的是，但不是全部.

Is this correct? Is the scope entirely limited to a single file and any @imports therein? I'm reasonably sure that it is, but not entirely.

就目前而言，我的解决方法比我想要的更为复杂:我正在构建依赖服务器端，然后将它们动态地添加到一个巨大的，单一的development.less文件中.(请注意，出于生产目的，我有一个编译过程，该过程会编译并缩小我的代码，以便我直接使用CSS.)

For now, my workaround is more complex than I'd like: I'm building dependencies server side, and then munging them into a giant, single development.less file on the fly. (Note that for production purposes, I have a build process that compiles and minifies my less so that I serve straight up CSS).

我已经在LESS源代码中查看过browser.js的线索，但是我想先在这里问一下这是否可能甚至理想.对于这种行为，我感到有些惊讶，因为它不是多个javascript文件和内联代码如何工作.

I've looked at browser.js in the LESS source code for clues but thought I'd ask here first if this was possible or even desirable. I was a bit surprised at this behavior since it's not how multiple javascript files and inline code work.

推荐答案

为什么不起作用

LESS文件的每个< link> 预处理该文件并将其解析为纯CSS输出.html本身的作用域"中没有变量或任何东西，因此第二个< link> 都无法使用.这就是为什么一个人看不到另一个的原因.

Why It Doesn't Work

Each <link> of a LESS file preprocesses that file and resolves it to just a plain CSS output. No variables or anything are left in the "scope" of the html itself, so there is nothing for the second <link> to be able to use. That is why one cannot read the other.

使用 LESS 1.5 可以使 @import 仅作为参考(因此不会将直接输出编译到文件中).因此，您的 other-file.less 可以做到这一点:

With LESS 1.5 an @import can be made to just be a reference (and thus not compile direct output into the file). So your other-file.less could do this:

@import (reference) file.less;

获取所需的依赖项.

这篇关于是否可以让LESS解析器在链接标记中的多个LESS文件之间创建共享作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！