サブページごとに異なるテーマを含むプロジェクトに取り組んでいます。各サブページには、フレームとまったく同じ HTML マークアップがありますが、すべてのサブページで、同じ要素 (見出しなど) は異なる色にする必要があります。
私がこの問題に取り組んでいる方法は、red.css や blue.css など、対応する CSS ファイルのサブページで異なるすべての宣言を行うことです。これらのファイルには、異なる必要があるセレクターの色宣言のみが含まれているため、font-sizes と他のすべてはグローバル CSS ファイルにあります。
私が達成したいのは、ファイルで色変数を宣言し、CSS 宣言に対応する変数を含むテーマ CSS ファイルの SCSS フレームを作成することです。より明確な方法で:
変数宣言の例:
$red: red;
$blue: blue;
テーマ フレームの SCSS ファイルは次のようになります。
h1 {
color: $heading-color;
}
目標は、SASS が変数をループして、同じフレームを持つ X 個の異なる CSS ファイルを作成することですが、それぞれの適切な場所に対応する値が必要であるため、blue.css には青の値が必要です。赤には赤の値などが必要です。
これは可能ですか?私が避けようとしているのは、正確なフレームを含む X SCSS ファイルを作成することですが、値に異なる値を使用することです。これは、何かが変更されるたびに X 回の編集を意味するためです。