7

我刚刚开始使用 LESS 来简化我的 CSS 内容。我希望能够在一个文件中定义颜色，因此我可以有多种配色方案，只需更改引用的文件即可。

我试过这样的事情：

<link rel="stylesheet/less" href="/css/colours.less" />
<link rel="stylesheet/less" href="/css/styles.less" />

但我在文件中收到“变量未定义”错误styles.less。

我可以通过import "/css/colours.less"在开头使用来“修复”这个问题styles.less，但是我必须对每个 LESS 文件都这样做，这使得更改正在使用的文件变得更加困难。

有没有办法在一个文件中定义变量并在另一个文件中使用它们？colours.less或者有什么方法可以在其他文件的开头自动导入文件？

4

1 回答 1

7

您应该将您的.less文件编译成一个.css文件，并在每个页面上包含一次（即styles.less编译为styles.css）。这样浏览器就没有在每次页面加载时重新编译 CSS 的开销。也.css可以缓存文件。

而不是添加：

<link href="/css/colours.less" />
<link href="/css/styles.less" />
<link href="/css/forms.less" />
<link href="/css/widgets.less" />
...etc...

它应该是：

<link href="/css/styles.css" />

你styles.less应该有：

@import 'colours';
@import 'forms';
@import 'widgets';
...etc...

否则，如果您想colours.less在多个.less样式表中重用，则需要@import在每个样式表中使用它们。

.less出于开发目的，我建议使用仅包含变量声明和@import语句的单个主文件。这样就很容易找到添加了其他脚本的位置。LESS 使得添加或删除样式表以保持代码井井有条变得非常容易。

例如，style.less可能看起来像：

// import statements
@import 'core';
@import 'mixins';
@import 'lists';
@import 'buttons';

@import 'forms/form';
@import 'forms/search';
@import 'forms/contact-us';

@import 'modules/module';
@import 'modules/archive';
@import 'modules/events';

// variables
@image-path: '/assets/images/';

@font: Helvetica, Arial, sans-serif;

@black: #000;
@dark-grey: #333;
@grey: #888;
@light-grey: #CCC;
@white: #FFF;
@red: #F00;

这种结构使添加新样式表变得容易，例如在添加新模块时：

...
@import 'modules/events';
@import 'modules/foo'; //add another module
...

如果不再使用样式，它还可以很容易地删除样式。如果要删除模块，只需删除语句即可foo轻松删除所有foo样式。@import 'modules/foo';

于 2013-04-19T03:36:39.490 回答