Определение переменных с помощью 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 ;?