在一个LESS文件中定义变量

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';语句就可以轻松删除所有样式.