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…?