jQuery CSS 类作为 LESS mixins

Question

由 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 类关联起来。然而，这不起作用；格式被完全忽略。但是当我删除那对 mixins 时，它就开始工作了。 (当然，减去 #user_box div 被视为具有这两个类。)这让我怀疑 LESS 的 JS 解析器无法找到这两个类并且正在中止。

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

---

编辑:数学指出我需要使用 @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:另外，我在客户端做的工作较少；不知道这是否会影响任何事情。

Answer 1

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

因此，如果您的 mixins 是在 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。