Css 在一个更少的文件中定义变量

我刚刚开始使用LESS来简化CSS。我希望能够在一个文件中定义颜色，这样我就可以有几个颜色方案，我可以通过更改引用的文件在这些方案之间切换

我试过这样的方法：

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

但是我在

style.less

文件中得到了“variable not defined”错误

我可以通过在

style.less

的开头使用

导入/css/colors.less“

来“修复”这个问题，但是我必须对每个less文件都这样做，这使得更改正在使用的文件变得越来越困难

---

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

颜色.less

文件的任何方法？

您应该将

.less

文件编译成一个

.css

文件，并在每页包含一次（即

样式.less

编译为

样式.css

）。这样，浏览器就不会在每次加载页面时都重新编译CSS。也可以缓存

.css

文件

而不是添加：

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

否则，如果要在多个

.less

样式表中重用

颜色.less

，则需要在每个样式表中导入它们

---

出于开发目的，我建议使用一个只包含变量声明和

@import

语句的主

.less

文件。这样很容易找到添加了其他脚本的位置。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

模块，只需删除

@import'modules/foo'即可轻松删除所有
foo
样式语句。
好的。我目前使用浏览器端编译，因为该网站正在开发中，但当它准备好打开时，我可以有一个“编译”脚本，自动添加相关的导入。谢谢你的提示。@Kolink，我已经更新了我的答案，提供了一些如何管理多个样式表的建议。嗯，这给了我一个想法。谢谢你的提示@切坦，你显然没有读到这个答案。
.css
扩展名不是打字错误。
// 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
...