Skip to content

Instantly share code, notes, and snippets.

@simonsmith
Created August 24, 2012 09:52
Show Gist options
  • Save simonsmith/3448455 to your computer and use it in GitHub Desktop.
Save simonsmith/3448455 to your computer and use it in GitHub Desktop.
Dynamic classes in LESS CSS
/* http://pxtoem.com/ */
@baseFontSize: 16;
.paddingLeftX (@index) when (@index > 0) {
(~".pl@{index}") {
padding-left: (@index / @baseFontSize) + 0em;
}
.paddingLeftX(@index - 5); /* Change for different increments */
}
.paddingLeftX (0) {}
.paddingLeftX(25);
/*
Outputs:
.pl25 {
padding-left: 1.5625em;
}
.pl20 {
padding-left: 1.25em;
}
.pl15 {
padding-left: 0.9375em;
}
.pl10 {
padding-left: 0.625em;
}
.pl5 {
padding-left: 0.3125em;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment