CSSは2つのサイトで異なる色のスキームを管理します

Question

2つのかなり大きなサイトは構造的には同じですが、ブランドは異なります。ファイルを複製することでメンテナンスの悪夢を避けるためにCSSを構築/構築する最善の方法は何ですか？

たとえば、サイト1とサイト2のような2つのCSSファイルがあり、それぞれ異なるブランド名を含む2つのファイルから生成された場合、実行中のサイトに基づいて正しいファイルを読み込むことができます。しかし、私はまだ2つの異なるファイルで2回何か変更を加えなければならない/新しい場所を2つの場所に追加するなど。

これを避ける方法はありますか？

は、もう少し具体的に：

二つの変数以下のファイル（colours1とcolours2）と1つのサイトのファイル（サイト構造と言う）：

が、私は次のような何かをしたいです。

各変数ファイル内の変数はまったく同じものと呼ばれます。

これで、site1とsite2のファイルが少なくなります。 site1では、私は2つのインポートステートメントインポートサイト構造とインポートcolours1を持っています。これらは実際に生成するためのものなので、実際のクラスステートメントはまったくありません。

colours1でブランド化されたsite1ファイルが生成されるように、colorsファイルのインポートによってサイト構造ファイルの色が上書きされます。

colours2と同様です。

それから私は今まで1つのファイル（サイト構造）に変更を追加する必要がありますし、

問題は、私は変数は、サイト構造のファイルにファイルをインポートする必要があるだろうということで、私のSITE1とSITE2ファイルを再生成しますそれをコンパイルするには

私の質問には、Less/Sassでこのオーバーライドを行う方法があるかもしれないと思っていますか、それとももっと良い方法がありますか？

おかげ

Answer 1

私たちはLESSを使用していた、以前にも同様のセットアップで働いていました。

.lessメインファイルが2つあり、それぞれが特定のサイトの「可変」ファイルをインポートしていました。例： site1.lessvariables-site1、site2.lessvariables-site2の輸入品です。

これは、コンパイル済みの2つのCSSファイルがあることを意味し、両方のサイトでそれぞれ使用できます。

編集：ここでは例：https://plnkr.co/edit/HcGRVgFdm1LfxQOCdGY0?p=preview あなたがから例のリンクタグを変更することができます。ページの変化を見るために

<link rel="stylesheet/less" type="text/css" href="site2.less" /> 

：に

<link rel="stylesheet/less" type="text/css" href="site1.less" /> 

。あなたは、次のファイルを持っている例では

：site1.lessの

--site1.less 
-var1.less 

--site2.less 
-var2.less 

--shared.less 

内容：site2.lessの

@import "var1"; 
@import "shared"; 

コンテンツ：共有の

@import "var2"; 
@import "shared"; 

コンテンツ。少ない：

h1{ 
    color: @header-colour; 
} 

共有されていないすべての共有コンテンツを持っているので、site1とsite2ファイルはビルドファイルのエントリポイントにすぎず、var1とvar2は可変ファイルです。

・ホープこれはあなたが1つのmain.lessファイルを持っているし、2 site1.lessとsite2.lessを持つことができます

Answer 2

に役立ちます。あなたは色の変数を定義して、あなただけmain.lessファイルへの編集を行うに維持し、必要な場合だけで色の変数を変更することができ

@main_color: #aabbcc; 
@secondary_color: #aabbdd; 
@tertiary_color: #abcdee; 
. 
. 
. 
@import "path to main.less" 

こうした後main.lessファイルをインポートし、これらのファイルには

サイト .lessファイル