cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Dynamic color generation with SASS</h1>

<h2>Additive Gradation</h2>
<ul class="additive">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Multiplicative Gradation</h2>
<ul class="multiplicative">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Exponential Gradation</h2>
<ul class="exponential">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Additive Hue</h2>
<ul class="additive hue">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Multiplicative Hue</h2>
<ul class="multiplicative hue">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Exponential Hue</h2>
<ul class="exponential hue">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h2>Degree-based Hue</h2>
<ul class="degree hue">
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
  <li class="button"></li>
</ul>

<h1>Huge hat tip to <a href="http://codepen.io/Ant1n/pen/vERBxX">Ant1n's Pen</a> that set this all in motion!</h1>

<h2>Full write up and explanation on <a href="http://mpinto.org/writing/using-sass-to-generate-colors-dynamically">mpinto.org</a></h2>
            
          
!
            
              /* set a base color, any color you like */
$base-color: rgb(239, 109, 172);

/* how many units do you want to loop through? can't exceed max number of elements in the child group */
$gradiated-buttons-count: 10; 

/*  Adjust this number to increase or decrease the strength of the color function */
$strength: 5; 

/* degrees - used for hue adjustment */
$degrees: 20deg;

/* Loop through the 'child' elements of our selected element, using nth-child, incrementally. This color effect is multiplicative - it will multiply the strength variable by the increment number to darken the base color accordingly */

@for $i from 0 to $gradiated-buttons-count {
      ul.multiplicative .button:nth-child(#{$i}) {
      background-color: darken($base-color, $i*$strength);
    }
  }

/* additive - add the strength variable to the increment number to darken the base color accordingly */

@for $i from 0 to $gradiated-buttons-count {
      ul.additive .button:nth-child(#{$i}) {
      background-color: darken($base-color, $i+$strength);
    }
  }

/* exponential  - multiply the increment variable by itself to darken the base color accordingly */

@for $i from 0 to $gradiated-buttons-count {
      ul.exponential .button:nth-child(#{$i}) {
      background-color: darken($base-color, $i*$i);
    }
  }

/* exponential hue  - multiply the increment variable by itself to darken the base color accordingly */

@for $i from 0 to $gradiated-buttons-count {
      ul.exponential.hue .button:nth-child(#{$i}) {
      background-color: adjust-hue($base-color, $i*$i);
    }
  }

/* multiplicative hue   */

@for $i from 0 to $gradiated-buttons-count {
      ul.multiplicative.hue .button:nth-child(#{$i}) {
      background-color: adjust-hue($base-color, $i*$strength);
    }
  }

/* additive hue  */

@for $i from 0 to $gradiated-buttons-count {
      ul.additive.hue .button:nth-child(#{$i}) {
      background-color: adjust-hue($base-color, $i+$strength);
    }
  }

/* degree based hue - play with the degrees variable. multiplying beyond 360 causes the colors to repeat! */

@for $i from 0 to $gradiated-buttons-count {
      ul.degree.hue .button:nth-child(#{$i}) {
      background-color: adjust-hue($base-color, $degrees*$i);
    }
  }

/* Just a wee bit of base styling to make this look decent. */

body {
  padding: 3%;
  font-family: Roboto, Arial, Sans-serif;
  color: $base-color;
}

h1 {
  font-size: 4.5vw;
  margin-top: none;
  color: darken( $base-color, 30% );
  font-weight: lighter;
}

h1, h2 {
  margin-left: 3.5%;
}

h2 {
   margin-top: 2em;
}

ul li {
  display: block;
  width: 96%;;
  height: 9vh;
}
            
          
!
            
              // thanks to Ant1n's Pen for the basic SASS looping function. http://codepen.io/Ant1n/pen/vERBxX //
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console