Create a gist now

Instantly share code, notes, and snippets.

@marcia /gist:7018719
Last active Dec 25, 2015

What would you like to do?
Implementing color palettes with LESS mixins
// 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 ~@_{!}@{!@{}!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment