LessCSS를 사용하여 웹 개발을 위한 재사용 가능하고 동적 테마 솔루션을 만드는 방법은 무엇입니까?

// Default appearance
@navBarHeight: 50px;

.appearanceWhite {
    @navBarHeight: 130px;
}
.appearanceBlack {
    @navBarHeight: 70px;
}

@themes: (
    blue:   rgb( 41, 128, 185),
    marine: rgb( 22, 160, 133),
    green:  rgb( 39, 174,  96),
    orange: rgb(211,  84,   0),
    red:    rgb(192,  57,  43),
    purple: rgb(142,  68, 173)
);

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

#navBar {
    .themed(background-color);
}