LESSを使用して複数のサイトテーマを管理する方法

Question

Structure a stylesheet to manage skins or themeskapsulaが正しく自己を明確に表現できないと思われますが、それは不明であると思われます。

私は、多数のCSS/LESSファイルを含む大きなプロジェクトに取り組んでいます。私たちは、特定のページに特有のCSSと、各ページの共通要素（メニュー、イメージプレースホルダーなど）のためのモノリシックなCSSファイルを個々のものに分割しました。

私たちは

ベースディレクトリには、プロジェクト内のすべてのページに固有のすべてのCSS/LESSがありますが、テーマディレクトリに設定されている色を除きますベースディレクトリ内にあります。

だから、この効果になります：私たちは単に指示@import "../classic.less"と私たちのCSSはすべて私たちの素敵で生成されたファイルを保存する時に挿入ORANGEディレクトリにclassic.lessファイル内

-CSS 
    - ORANGE [directory] 
    -> classic.less 
    -> controls.less 
    -> classic.less 
    -> controls.less 

ORANGE->classic.lessファイルに規定されているようなカラーテーマ設定。

このプロセスでは、ファイルの管理という点で少しの作業が保存されていますが、ベースディレクトリを変更するたびに（新しい要素タイプをフロントエンドに追加した場合など）新しいCSSが生成されるように、それを継承してもう一度保存してください。

これを行うより効率的な方法はありますか？または、私は誤った方法でテーマ化を行うことを見ています。私はもう少し何をしようとしているのかを説明する必要がありますか？

Answer 1

もっと柔軟な方法がありますが、Windowsが必要なWinLessが必要です（多分、他のものとやりとりできます。あなたが検索した場合、他のOSと同様のものが存在するはずです。

私が行ったことは、私のプロジェクトのCSSまたはStylesheetフォルダに、LessBaseという別のファイルを作成しました。ここでは、コアスタイルシートを保持します。例：

-Stylesheets 
    -LessBase 
    ->jquery-ui.less 
    ->forms.less 
    ->buttons.less 
    ->grids.less 
    ->widgets.less 
    ->etc 

その後、Stylesheetsフォルダに、あなたは、個々のテーマで追加のフォルダが必要になります。前の例のビル：

-Stylesheets 
    -LessBase 
    ->jquery-ui.less 
    ->forms.less 
    ->buttons.less 
    ->grids.less 
    ->widgets.less 
    ->... 
    ->all.less 
    -Orange 
    ->color-theme.less 
    ->main.css 
    -Black 
    ->color-theme.less 
    ->main.css 

all.lessファイルを注意してください。この1はLessBase内のすべてのファイルをインポートするために使用されます。

@import "buttons.less"; 
@import "forms.less"; 
etc 

color-theme.lessは基本的にあなたの色のすべてを保持します。 LessBaseの中には、.lessファイルのすべてに、テーマフォルダにあるcolor-theme.lessファイルのそれぞれに定義される変数が含まれています。

あなたcolor-theme.lessファイルには、次のようになります。

@main_color: #edf123; 
@secondary_color: #daa123; 
@border_color: #e7e7e7; 
. 
. 
. 
@import "../LessBase/all.less" 

all.lessのインポートは、変数が定義されているために、最後になければなりません。

次に、WinLess内でcolor-theme.lessを対応するテーマフォルダにあるmain.cssにコンパイルします。ここで

は一例とスクリーンショットです（私はsctructureをぼやけまた、 default_1, default_2はあなたが持っている orange, blackまたは任意のテーマの名前に置き換えて、テーマ名です。）：