2

感谢另一个问题，我最近发现了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_boxdiv 就好像它有这两个类一样。）这让我怀疑 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： 另外，我正在做更少的客户端；不知道会不会有什么影响。

4

3 回答 3

2

您需要导入/引用要在当前范围/文件中使用其 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

于 2012-06-21T18:59:03.313 回答
0

我遇到了同样的问题，我得到了这个工作。

从 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。

希望这对某人有帮助！

于 2013-11-15T10:36:53.707 回答
0

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

于 2012-06-21T19:38:00.673 回答