Edit Question - KnowledgeHub

Title Body

Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the "red" color scheme is the default. Like this: Color Definitions : @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; Basic Default Style Example body { background-color: @red-dk; #container { background-color: @red-md; p { color: @red-dk; } } } Different Color Scheme Style Example body.green { background-color: @green-dk; #container { background-color: @green-md; p { color: @green-dk; } } } I'd like to use variables so that I don't have to re-write all of the color variations for each scheme, so that I can just write something like this: body.[color-var] { background-color: @[color-var]-dk; #container { background-color: @[color-var]-md; p { color: @[color-var]-dk; } } } …but I can't quite wrap my head around how to accomplish that. Help…?

Tags (comma-separated) Cancel