Codekitを使用して、@importビヘイビアをLESSで囲んでいる混乱

Question

現在、Codekitでコンパイルしているブートストラップを使用しています。 variables.lessで

：

@blue: #0096EF; 

はstyle.lessでは、私が持っている以下：bootstrap.lessで

.title-text {color: @blue;} 
@import: "variables.less"; 

：

@import: "style.less"; 
@import: "variables.less"; 

が、私はこの権利をしています？私の考えでは、ブートストラップがコンパイルされると、変数が2回発生します。

Answer 1

これはCodekitの問題でもあることがわかりました。私はCodekitを使用して少ないファイルをコンパイルしています。

ソリューション：

1. Codekitが原因未に、コンパイルエラーを返し、保存に
2. （現在のドキュメントで宣言されていない）style.lessを作成し、意図したとおりに、それを編集し、変数 @blue参照変数はstyle.lessで宣言されています。エラーを無視します。 bootstrap.less @import style.less
3. 保存bootstrap.lessで
4. は、それは私がステップ2の間Codekitのバグに遭遇し、

ちなみに、HTMLドキュメントで問題なく

コールbootstrap.cssをコンパイル3.ステップ2の後、Codekitは何も見たりコンパイルしません。解決するためには、私は監視されたプロジェクトを削除し、それをCodekitに再追加する必要がありました。

Answer 2

あなたはvariables.lessを最初のインポートインスタンスとしてブートストラップに1回インポートすることができ、2回目は実際のスタイルに含めないでください。あなたはあなたの前提に正しかったので、再び変数をインポートします。同じ変数を2つの場所にインポートしていることを意味します。

P.S.あなたが変数にアクセスする前にあなたが使用する変数を定義するvariables.lessがインポートされていれば、あなたはうまくいくでしょう。

@color-black: #000; 

.color { 
     color: @color-black; 
}