Skip to content

Instantly share code, notes, and snippets.

@jgraup
Last active January 1, 2016 06:38
Show Gist options
  • Save jgraup/8105842 to your computer and use it in GitHub Desktop.
Save jgraup/8105842 to your computer and use it in GitHub Desktop.
Dynamically generate named CSS classes from list of variables using LESS
// c7da3b
.c_c7da3b{color:#c7da3b}
.cb_c7da3b{background-color:#c7da3b}
.ca_c7da3b a:not(.image){color:#c7da3b}
.cah_c7da3b a:not(.image):hover{color:#c7da3b}
.cba_c7da3b a:not(.image){background-color:#c7da3b}
.cbah_c7da3b a:not(.image):hover{background-color:#c7da3b}
.cbs_c7da3b ::selection{background-color:#c7da3b}
.cs_c7da3b ::selection{color:#c7da3b}
// grey
.c_grey{color:grey}
.cb_grey{background-color:grey}
.ca_grey a:not(.image){color:grey}
.cah_grey a:not(.image):hover{color:grey}
.cba_grey a:not(.image){background-color:grey}
.cbah_grey a:not(.image):hover{background-color:grey}
.cbs_grey ::selection{background-color:grey}
.cs_grey ::selection{color:grey}
@color-jgd-yellow: ~"c7da3b";
@color-jgd-grey: ~"636567";
@color-jgd-grey-light: ~"999";
@color-uw-gold: ~"d7a900";
@color-uw-purple: ~"8B008B";
@color-uw-secondary: ~"0F79A3";
@color-evcc-red: ~"900000";
@color-evcc-brown: ~"726c65";
// single
// .genColor(~"blue", blue);
// list
.genHexColors( @color-jgd-yellow, @color-jgd-grey, @color-jgd-grey-light,
@color-uw-gold, @color-uw-purple, @color-uw-secondary,
@color-evcc-red, @color-evcc-brown,
232323;);
.genColors(~"blue", ~"black", ~"white", ~"red", ~"grey", ~"beige";);
.genColor (@name, @color) {
.c_@{name} { color: @color; }
.cb_@{name} { background-color: @color; }
.ca_@{name} a:not(.image) { color: @color; }
.cah_@{name} a:not(.image):hover { color: @color; }
.cba_@{name} a:not(.image) { background-color: @color; }
.cbah_@{name} a:not(.image):hover { background-color: @color; }
.cbs_@{name} ::selection { background-color: @color; }
.cs_@{name} ::selection { color: @color; }
}
.genColors (@list, @index: 1) when (isstring(extract(@list, @index))) {
@item: extract(@list, @index);
.genColor(@item, @item);
.genColors(@list, (@index + 1)); /* loop the next member */
}
.genHexColors (@list, @index: 1) when (isstring(extract(@list, @index))) {
@item: extract(@list, @index);
@name: @item;
.genColor(@name, ~"#@{item}"); /* add # for numbers */
.genHexColors(@list, (@index + 1)); /* loop the next member */
}
.genHexColors (@list, @index: 1) when (isnumber(extract(@list, @index))) {
@item: extract(@list, @index);
@name: @item;
.genColor(@name, ~"#@{item}"); /* add # for numbers */
.genHexColors(@list, (@index + 1)); /* loop the next member */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment