在一个LESS文件中定义变量 [英] Define variables in one LESS file

问题描述

我刚刚开始使用LESS简化CSS内容.我希望能够在一个文件中定义颜色，因此我可以有几种颜色方案，仅通过更改所引用的文件就可以在它们之间进行切换.

I've just started using LESS to simplify my CSS stuff. I want to be able to define the colours in one file, so I can have several colour schemes that I can switch between just by changing which file is being referenced.

我尝试过这样的事情:

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

但是在styles.less文件中出现未定义变量"错误.

But I get "variable not defined" errors in the styles.less file.

我可以通过在styles.less开头使用import "/css/colours.less"来修复"此问题，但是我必须为每个单个LESS文件执行此操作，这使得更改正在使用的文件变得非常困难.

I can "fix" this by using import "/css/colours.less" at the start of styles.less, but I have to do this for every single LESS file, and it makes it much, much harder to change what file is being used.

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

Is there any way to define variables in one file and use them in another? Or any way to auto-import the colours.less file at the start of the other files?

推荐答案

您应该将.less文件编译为单个.css文件，并在每个页面上将其包含一次(即，将styles.less编译为styles.css ).这样，浏览器就不会在每次页面加载时都重新编译CSS.另外，.css文件也可以被缓存.

You should be compiling your .less files into a single .css file and including it once on every page (i.e. styles.less compiled to styles.css). That way the browser doesn't have the overhead of recompiling the CSS every page load. Also the .css file can be cached.

而不是添加:

<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...

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

Otherwise, if you want to reuse colours.less in multiple .less stylesheets, you'll need to @import them in each stylesheet.

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

For development purposes, I recommend using a single, primary .less file that contains only variable declarations and @import statements. That way it's easy to find where additional scripts are added. LESS makes it very easy to add or remove stylesheets to keep the code organized.

例如，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;

这种结构使添加新样式表(例如添加新模块时)变得容易:

This structure makes it easy to add a new stylesheet, such as when adding a new module:

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

如果不再使用样式，它也使删除样式变得非常容易.如果要删除foo模块，只需删除@import 'modules/foo';语句即可轻松删除所有foo样式.

It also makes it very easy to remove styles if they're no longer being used. If the foo module was to be removed, it's easy to remove all the foo styles simply by removing the @import 'modules/foo'; statement.

这篇关于在一个LESS文件中定义变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！