Variablen definieren Variablen mit WENIGER CSS

Angenommen, ich habe drei separate Farbschemata, die auf verschiedenen Seiten einer Site verwendet werden. Für jede Farbe ist ein heller, mittlerer und dunkler Farbton definiert, und das Farbschema wird durch eine Klasse im Körper definiert. Angenommen, das "rote" Farbschema ist die Standardeinstellung. So was:

Farbdefinitionen:

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

Beispiel für einen einfachen Standardstil

body { background-color: @red-dk;
  #container { background-color: @red-md;
     p { color: @red-dk; }
  }
}

Beispiel für ein anderes Farbschema

body.green { background-color: @green-dk;
  #container { background-color: @green-md;
     p { color: @green-dk; }
  }
}

Ich möchte Variablen verwenden, damit ich nicht alle Farbvarianten für jedes Schema neu schreiben muss, damit ich einfach so etwas schreiben kann:

body.[color-var] { background-color: @[color-var]-dk;
  #container { background-color: @[color-var]-md;
     p { color: @[color-var]-dk; }
  }
}

… Aber ich kann mich nicht so recht damit auseinandersetzen, wie ich das erreichen soll. Hilfe…?

Antworten auf die Frage(5)

Ihre Antwort auf die Frage