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

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

Определения цветов:

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

Пример основного стиля по умолчанию

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

Пример стиля другой цветовой схемы

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

…но я не совсем понимаю, как это сделать. Справка…?

42
задан Kerri 25 June 2012 в 22:22
поделиться