1つのLESSファイルに変数を定義する

Question

私はCSSを単純化するためにLESSを使い始めました。私は1つのファイルで色を定義できるようにするため、参照するファイルを変更するだけでいくつかのカラースキームを切り替えることができます。

私はこのような何か試してみました：

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

をしかし、私はstyles.lessファイルにエラーを「変数定義されていません」を取得。

styles.lessの最初にimport "/css/colours.less"を使用してこれを修正することはできますが、これはすべての1つのLESSファイルで行う必要があり、使用するファイルを変更するのがずっと難しくなります。

変数を1つのファイルに定義し、別のファイルで使用する方法はありますか？または、他のファイルの先頭にあるcolours.lessファイルを自動インポートする方法はありますか？

Answer 1

あなたは、単一の.cssのファイルにあなたの.lessファイルをコンパイルし、一度すべてのページ（styles.cssにコンパイルつまりstyles.less）に、それを含むべきです。このようにして、ブラウザには、ページロードごとに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スタイルシート、にする必要がありますそれぞれのスタイルシートに210個。開発目的のために

---

、私は唯一の変数宣言と@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スタイルを簡単に削除できます。