Implementing color palettes with LESS mixins

gistfile1.txt

// List out each domain's colors theme
@mathDomainColor:       #297395; // The dark blue
@mathSubjectColor:      #30a7de; // The lighter blue
... more colors ...
 
@scienceDomainColor:    #ba3d66; // The dark pink
@scienceSubjectColor:   #c8547c; // The lighter pink
... more colors ...
 
// Here's a mixin that will call .domainRuleToApply on each domain for us
.applyToDomains() {
    .domainRuleToApply(math);
    .domainRuleToApply(science);
    .domainRuleToApply(economics);
    .domainRuleToApply(humanities);
    .domainRuleToApply(cs);
}
 
// Let's make it so that any element with a class of "domain-color" and one of
// "math", "economics" etc will have a background of the appropriate color
// The above .applyToDomains mixin will handle calling some mixin for each
// domain, so now it's time for us to define that inner mixin.
.domainRuleToApply(@domain) {
    // If our element has one of the "math", "science", etc classes
    .@{domain} {
        // Make the text color white
        color: @white;
 
        // If our element has a "domain-color" class
        &.domain-color {
            // Here's some magic that:
            // - gets the right variable, eg. @mathDomainColor
            // - turn the variable into the right color, like #30a7de
            background: ~"@{@{domain}DomainColor}";
        }
 
        // If our element has a "subject-color" class
        &.subject-color {
            background: ~"@{@{domain}SubjectColor}";
        }
    }
}
 
// Though we have defined both mixins, we haven't called the outer one yet.
.applyToDomains;
 
// That's all!
// PS this isn't *exactly* how we implemented it, but I think this is a good
// enough illustration of how one might implement it.
// PPS I still usually copy/paste these around from Ben Ko and Marcos because
// of ~@_{!}@{!@{}!