jQuery CSS 类作为 LESS 混合答案

【问题标题】：jQuery CSS classes as LESS mixinsjQuery CSS 类作为 LESS 混合
【发布时间】：2013-11-15 18:36:53
【问题描述】：

感谢another question, 我最近发现了LESS. 不幸的是，我无法让它做我想做的事。

我的 .less 文件如下所示：

#user_box {
    .ui-widget-content;
    .ui-corner-all;
    position: fixed; 
    left: 10px; 
    top: 10px; 
    padding: 5px;
    z-index: 100; 
    height: 40em; 
    width: 16em;
    background-color: white;
}

我正在尝试将那个特定的 div 与那对 jQuery 类相关联。但是，它不起作用；格式被完全忽略。但是当我删除那对 mixin 时，它就开始工作了。（当然，减去 #user_box div 就好像它有这两个类一样。）这让我怀疑 LESS 的 JS 解析器无法找到这两个类并且正在中止。

我做错了吗，还是 LESS 根本不允许您将其他 .css 文件的类作为 mixins 拉入？ FWIW，我在所有 jQuery 链接/脚本调用之后放置“样式表/更少”链接和 less.js 脚本。

编辑： Mathletics 指出我需要使用@import 语句，但我仍在苦苦挣扎。 .less 文件位于/team/css，而我尝试导入的文件位于/team/css/custom-theme。以下陈述均无效：

@import "/team/css/custom-theme/jquery-ui-1.8.21.custom.css";
@import "custom-theme/jquery-ui-1.8.21.custom.css";
@import "jquery-ui-1.8.21.custom.css";

无论<link type="text/css" href="/team/css/custom-theme/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 是否已包含在 HTML 文件中，这都是正确的。

编辑 2： 另外，我正在做更少的客户端；不知道会不会有什么影响。

【问题讨论】：

标签： jquery less

【解决方案1】：

您需要在当前范围/文件中导入/引用要使用其 mixin 的任何文件。

所以，如果你的 mixin 是在 mixins.less 中定义的，你的 less 文件应该是这样的：

@import "mixins" /* NOTE THIS IMPORT */

#user_box {
    .ui-widget-content;
    .ui-corner-all;
    position: fixed; 
    left: 10px; 
    top: 10px; 
    padding: 5px;
    z-index: 100; 
    height: 40em; 
    width: 16em;
    background-color: white;
}

您不能从当前 LESS 文件不知道的文件中提取类。但是，您可以使用 LESS 编译器为您组合文件，因此您只需一两个文件即可导入其他文件，从而使您的所有类都可用。

感谢@zzzBov 指出LESS 不解析带有CSS 扩展名的文件；对于要在 LESS 中访问其规则的任何文件，您需要将扩展名从 .css 更改为 .less。

【讨论】：

这似乎不起作用，尽管我可能会搞砸执行。但我需要问：我可以只导入其他 .less 文件吗？因为就像我说的，我正在尝试拉入 jQuery 的 .css 文件。
我可以看看你的进口声明吗？你应该能够做你想做的事。您可以同时导入css 和LESS 文件。

【解决方案2】：

导入时，CSS 文件被视为文字输出，而不是由 LESS 解释。

【讨论】：

这似乎是真的，但是你看到文档里写的了吗？很高兴指出这方面的参考。
在importing 下的文档中：“如果你想导入一个 CSS 文件，并且不想让 LESS 处理它，只需使用 .css 扩展名”。

【解决方案3】：

我遇到了同样的问题，我解决了这个问题。

从 jqueryUI 主题滚轮下载主题。在 zip 里面会有一个 CSS 文件夹和主题名称。我使用了“开始”主题。

在你的 .less 文件的顶部放这个。

@import "start/jquery-ui-1.10.3.custom.less";

请务必注意，导入是基于当前文件所在的位置。我将我的 styles.less 文件放在服务器根目录上另一个名为 css 的文件夹中。因此，主题文件夹名称“start”就在其中，这一点很重要。

确保在您的 HTML 中删除任何对 jqueryUI 主题 .css 的旧引用。

在“开始”文件夹中，您将看到图像。将 images 文件夹移动到 styles.less 文件所在的目录。这很重要，否则它将无法正常工作，您将收到错误。如果您使用 Google Chrome Inspector->console，您可以看到错误。

最后，正如 Mathletics 指出的那样，您必须将 jquery-ui-1.10.3.custom.css 文件的 .css 更改为 .less （或您碰巧说的任何内容）。它不会导入，除非它说 .less

.less 的好处是，如果不使用与 {LESS} 相关的语法，它会回退到普通 CSS，这使得它可以正常工作:)。

现在我可以使用 jQuery 类中的 Mixins。

希望这对某人有所帮助！

【讨论】：