0

サブページごとに異なるテーマを含むプロジェクトに取り組んでいます。各サブページには、フレームとまったく同じ 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 回の編集を意味するためです。

4

1 に答える 1