7

CSS を簡素化するために LESS を使い始めたところです。1 つのファイルで色を定義できるようにしたいので、参照するファイルを変更するだけで、複数の配色を切り替えることができます。

私はこのようなことを試しました：

<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それをすべてのページに 1 回含める必要があります (つまり、に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 に答える