Question

我刚刚开始使用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文件的任何方法？

Answer 1

您应该将.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';样式。

在一个LESS文件中定义变量

1 个答案: