Looping in LESS to get custom colors generated into classes

In this example below you will see how to do a Looping in LESS to get custom colors generated into classes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sean185, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sean185 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Looping in LESS to get custom colors generated into classes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<h1>Hello!</h1>
<p style="padding: 2em;">This pen is a test to determine how to *automatically* generate color styles (and add them to other classes) from an "array". Enjoy!</p>
<h1>7 color palette</h1>
<p>colors generated from <a href="http://tools.medialab.sciences-po.fr/iwanthue/">iWantHue</a></p>
<div class="brown">brown</div>
<div class="bamboo">bamboo</div>
<div class="purple">purple</div>
<div class="gray">gray</div>
<div class="orange">orange</div>
<div class="teal">teal</div>
<div class="marine">marine</div>
<p>.</p>
<h1>Rainbow colors</h1>
<p>whee~</p>
<div class="red">red</div>
<div class="orange">orange</div>
<div class="yellow">yellow</div>
<div class="green">green</div>
<div class="blue">blue</div>
<div class="indigo">indigo</div>
<div class="violet">violet</div>
<p>.</p>
<h1>now some more stuff</h1>
<p>whee~</p>
<div class="color1">color1</div>
<div class="color2">color2</div>
<div class="color3">color3</div>
<div class="color4">color4</div>
<div class="color5">color5</div>
<div class="color6">color6</div>
<div class="color7">color7</div>
<div class="color8">color8</div>
<div class="color9">color9</div>
<div class="color10">color10</div>
<div class="color11">color11</div>
<div class="color12">color12</div>
<div class="color13">color13</div>
<div class="color14">color14</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sean185/looping-in-less-to-get-custom-colors-generated-into-classes-pgZPzR */
/*
    Notes to Reader:
    A thought project is to use one primary color to style the entire site, by having LESS generate all contrasting/complementary/lighter/darker/etc. color schemes necessary for everything, ranging from things that need emphasis, to buttons being hovered/clicked/depressed/active. Cheers! https://webdesign.tutsplus.com/tutorials/creating-color-schemes-with-less-color-functions--cms-23668

*/
body {
  background-color: #EEE;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: sans-serif;
  box-sizing: border-box;
}
body * {
  box-sizing: inherit;
  position: relative;
}
div {
  padding: 1em;
  font-size: 1.5em;
}
.brown {
  background-color: #52423A;
  color: #ffffff;
}
.bamboo {
  background-color: #9CC046;
  color: #000000;
}
.purple {
  background-color: #C64FA2;
  color: #ffffff;
}
.gray {
  background-color: #A5ACBD;
  color: #ffffff;
}
.orange {
  background-color: #C46443;
  color: #ffffff;
}
.teal {
  background-color: #84C091;
  color: #000000;
}
.marine {
  background-color: #7366B5;
  color: #ffffff;
}
.color1 {
  background-color: #42513F;
  color: #ffffff;
}
.color2 {
  background-color: #C950CA;
  color: #ffffff;
}
.color3 {
  background-color: #73D653;
  color: #000000;
}
.color4 {
  background-color: #D0493C;
  color: #ffffff;
}
.color5 {
  background-color: #8AABC7;
  color: #ffffff;
}
.color6 {
  background-color: #81D2A9;
  color: #000000;
}
.color7 {
  background-color: #C8588A;
  color: #ffffff;
}
.color8 {
  background-color: #553B5F;
  color: #ffffff;
}
.color9 {
  background-color: #C48439;
  color: #ffffff;
}
.color10 {
  background-color: #CBAD97;
  color: #000000;
}
.color11 {
  background-color: #CECD4F;
  color: #000000;
}
.color12 {
  background-color: #8173CB;
  color: #ffffff;
}
.color13 {
  background-color: #60843A;
  color: #ffffff;
}
.color14 {
  background-color: #70382C;
  color: #ffffff;
}
.red {
  background-color: #DB2828;
  color: #ffffff;
}
.orange {
  background-color: #F2711C;
  color: #ffffff;
}
.yellow {
  background-color: #FBBD08;
  color: #000000;
}
.green {
  background-color: #21BA45;
  color: #ffffff;
}
.blue {
  background-color: #2185D0;
  color: #ffffff;
}
.indigo {
  background-color: #553b5f;
  color: #ffffff;
}
.violet {
  background-color: #6435C9;
  color: #ffffff;
}
.row.brown {
  background-color: #52423A;
  color: #ffffff;
}
.row.bamboo {
  background-color: #9CC046;
  color: #000000;
}
.row.purple {
  background-color: #C64FA2;
  color: #ffffff;
}
.row.gray {
  background-color: #A5ACBD;
  color: #ffffff;
}
.row.orange {
  background-color: #C46443;
  color: #ffffff;
}
.row.teal {
  background-color: #84C091;
  color: #000000;
}
.row.marine {
  background-color: #7366B5;
  color: #ffffff;
}
.row .someclass.color1 {
  background-color: #42513F;
  color: #ffffff;
}
.row .someclass.color2 {
  background-color: #C950CA;
  color: #ffffff;
}
.row .someclass.color3 {
  background-color: #73D653;
  color: #000000;
}
.row .someclass.color4 {
  background-color: #D0493C;
  color: #ffffff;
}
.row .someclass.color5 {
  background-color: #8AABC7;
  color: #ffffff;
}
.row .someclass.color6 {
  background-color: #81D2A9;
  color: #000000;
}
.row .someclass.color7 {
  background-color: #C8588A;
  color: #ffffff;
}
.row .someclass.color8 {
  background-color: #553B5F;
  color: #ffffff;
}
.row .someclass.color9 {
  background-color: #C48439;
  color: #ffffff;
}
.row .someclass.color10 {
  background-color: #CBAD97;
  color: #000000;
}
.row .someclass.color11 {
  background-color: #CECD4F;
  color: #000000;
}
.row .someclass.color12 {
  background-color: #8173CB;
  color: #ffffff;
}
.row .someclass.color13 {
  background-color: #60843A;
  color: #ffffff;
}
.row .someclass.color14 {
  background-color: #70382C;
  color: #ffffff;
}
.row .someclass .someotherclass.red {
  background-color: #DB2828;
  color: #ffffff;
}
.row .someclass .someotherclass.orange {
  background-color: #F2711C;
  color: #ffffff;
}
.row .someclass .someotherclass.yellow {
  background-color: #FBBD08;
  color: #000000;
}
.row .someclass .someotherclass.green {
  background-color: #21BA45;
  color: #ffffff;
}
.row .someclass .someotherclass.blue {
  background-color: #2185D0;
  color: #ffffff;
}
.row .someclass .someotherclass.indigo {
  background-color: #553b5f;
  color: #ffffff;
}
.row .someclass .someotherclass.violet {
  background-color: #6435C9;
  color: #ffffff;
}
/*---  Colors  ---*/
/*---  Light Colors  ---*/
/*---   Neutrals  ---*/

Comments