web-dev-qa-db-ja.com

ファイル間で変数を共有するless.css

私はless.cssを使用してCSSスタイルを簡素化しています。 1つ少ないファイルで変数を宣言し、その多くの少ないファイルでその使用法を共有したいと思います。これは可能ですか？例えば：

英語.less

@languageFloat：左;

chart.less

div#footer a.web
{   
    display: block;
    float: @languageFloat;
    color: #cccccc;
    margin-right: 10px;
}
less
67
vondip

これを行う最善の方法は、@importすべての変数を含むLESSファイルを使用することです。 @importキーワードの構文は次のとおりです。

// For LESS file includes,
@import "lib.less";
// or
@import "lib"; // infers the .less extension

// and for plain CSS includes which are added but not parsed by LESS
@import "style.css";

これは、@importステートメントがLESSファイルとCSSファイルを1つの単一のCSSファイルに合成するため、CSSファイルを（ブラウザー内のless.js解析ではなく）ユーザーに提供する場合に特にうまく機能します。おそらく、変数を含む1つのコントローラーLESSファイルを作成してから、他のLESSおよびCSSファイルを作成して、最終的にブラウザーに提供する1つのファイルにすることを検討できます。

次のような単純なものになると思います。

// Controller.less
@import "english.less";
@import "chart.less";
75
Nathan Strutz

//例BlueTheme.less少ないファイル---------
_@import "DefaultBlueParameters.less";_ <---テーマレス変数のみ

@import (less) "DefaultBase.css"; <---使用法_DefaultBlueParameters.less vars_

BlueTheme.cssを生成します

0
Tadeuš Kozlovski