SCSS Color Chart

index.html

#container
  %h1 color mixing with SCSS
  - 50.times do
    .mixing

script.js

$(document).ready(function(){
  $('#container').scrollLeft();
  $('h1').mouseenter(function(){
    $(this).css('color','rgba(255,255,255,1)')
    });
  $('h1').mouseleave(function(){
    $(this).css('color','rgba(255,255,255,0)')
    });
/*..............................................*/ 
  var cycle;

 $("div").each(function(){
   var vh = window.innerHeight;
   $(this).animate({
     height: vh,
     width: '100%',
     opacity: "toggle"
   },
   10000, "linear",
   function() {
      animate();
   });
 });
/*----------------------------------------------------*/
});






/*.animate( properties [, duration ] [, easing ] [, complete ] )*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

SCSS Color Chart.markdown

SCSS Color Chart

A Pen by digital-doodle on CodePen.

License.

style.css

@import "compass/css3";

$color:#A3005C;
$color2: #D9D9A8;
$color3:#8C8CC7;
$defaultWidth:52px;
$defaultHeight:350px;
$display:inline-block;
$margin:0 auto;
$widthOuter:850px;
$float:left;
$borderRadius:550%;
$textSize:50px;
$textWeight:bold;
$textShadow:2px 2px 2px rgba(0,0,0,0.5),-2px 16px 2px rgba(0,0,0,0.2);



//Our Break points
@mixin breakpoint($point) {
   @if $point == desktop {
     @media (min-width: 70em) { @content ; }
  }
   @else if $point == laptop {
     @media (min-width: 64em) { @content ; }
  }
    @else if $point == tablet {
     @media (min-width: 50em) { @content ; }
  }
   @else if $point == phablet {
     @media (min-width: 37.5em)  { @content ; }
  }
        @else if $point == mobileonly {
     @media (max-width: 37.5em)  { @content ; }

  }
}


body{
  margin:4rem auto;
  background-color:adjust-hue(tint($color, 50%), 5%);
}
div#container{
  background-color:lighten($color, 45%);
  margin:$margin;
  width:$widthOuter;
  @include breakpoint(mobileonly){
    width: 100%;
  }
  border-radius:$borderRadius;
  overflow:hidden;
  height:$defaultHeight;
  h1{
    position: absolute;
    z-index: +1;
    top: 50%;
    left: 30%;
    color: lighten($color, 15%);
    font:{
      weight: $textWeight;
      size: $textSize;
    }
    text:{
      align: center;
      shadow: $textShadow;
    }
  }
}
div.mixing{
  height: $defaultHeight;
  width: $defaultWidth;
  display: $display;
  float: $float;
  background-color: $color3;
}

@for $i from 1 through 21{
  div.mixing:nth-of-type(#{$i}){
    background-color: lighten($color, 3% * $i);
    transition: background-color 2s;
  }
}