Определение переменных с помощью LESS CSS

Скажем, у меня есть три отдельные цветовые схемы, которые используются на разных страницах сайта. Каждый цвет имеет светлый, средний и темный оттенок, а цветовая схема определяется классом в теле. Предположим, что «красный» цветовая схема по умолчанию. Как это:

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; }
  }
}

Я хотел бы использовать переменные, чтобы мне не приходилось переписывать все цветовые вариации для каждой схемы, чтобы я мог просто написать что-то вроде этого:

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

& # x2026; но я не могу полностью понять, как этого добиться. Помощь & # x2026 ;?

Ответы на вопрос(5)

Ваш ответ на вопрос