1

尽管使用了一次导入，LESS 仍在不同文件中导入相同的 LESS。

例如：

<link rel="stylesheet/less" type="text/css" href="app.less">
<link rel="stylesheet/less" type="text/css" href="theme.less">

无应用程序

@import-once "1.less";

body{
    color:blue;
}

无主题

@import-once "1.less";

body{
    color:pink;
}

产生：

<style type="text/css" id="less:good-docs-less-app">
    body {
        background: yellow;
    }
    body {
        color: blue;
    }
</style>

<style type="text/css" id="less:good-docs-less-theme">
    body {
        background: yellow;
    }
    body {
        color: pink;
    }
</style>

您注意到body{background:yellow}两种样式都重复。是否可以在不写两次的情况下将其导入两个 LESS 文件中？

4

2 回答 2

2

不是我知道的。但我建议将所有 LESS 代码编译到一个文件中。这样做，您还可以减少对服务器的调用次数，即页面速度的小幅优化。

在我参与的项目中，我们倾向于为所有 LESS 提供一个主文件，因此，所有样式都被编译成一个 CSS 文件。

例子：

  • styles.less 是主文件。它本身不定义任何样式，而只包含导入语句
  • variables.less 包含一些在整个项目中使用的通用变量。它们被定义一次，并在任何地方重复使用。示例：颜色、字体、标题等。
  • 更多包含实际样式的文件。只要有可能，使用 LESS mixin 来避免代码重复。

另一方面，重复的样式定义并不是很严格。只需注意 CSS 样式定义的顺序，因为它们会相互覆盖。

希望这可以帮助...

于 2013-01-29T22:47:44.577 回答
1

你误解了什么import-once。当代码在该 .less 代码中编译时，它可以防止再次发生导入。但是，当theme.less您app.less将它们链接到您的<html>. 到那时，app.less已经完成了它的工作并制作了你的第一部分 css。

因此，唯一可以防止在特定文件import-once中发生第二次导入。例如，如果你有这个：.lessapp.less

@import-once "1.less";
@import "theme.less";

body{
    color:blue;
}

然后1.less文件theme.less不会被重新导入，因为它已经在app.less. 在这一点上，我们在编译期间仍然在LESS 代码中。<link>在<html>. _

正如 phammer 在他的帖子中所说，解决方案是将所有 LESS 编译成一个主 CSS 文件以链接到 html。这样，您确实将所有 LESS 代码“放在一起”（因此它会import-once按照您的预期识别）。

于 2013-01-29T23:32:05.327 回答