Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ezos86/691e1b29c08df30a25d5 to your computer and use it in GitHub Desktop.
Save ezos86/691e1b29c08df30a25d5 to your computer and use it in GitHub Desktop.
The Sass Lighten and Darken Scale Helper
<h1>The Sass <span class="lighten">Lighten</span> and <span class="darken">Darken</span> Scale Helper</h1>
<div class="normal"></div>
<div class="lighten-1"></div><div class="darken-1"></div>
<div class="lighten-2"></div><div class="darken-2"></div>
<div class="lighten-3"></div><div class="darken-3"></div>
<div class="lighten-4"></div><div class="darken-4"></div>
<div class="lighten-5"></div><div class="darken-5"></div>
<div class="lighten-6"></div><div class="darken-6"></div>
<div class="lighten-7"></div><div class="darken-7"></div>
<div class="lighten-8"></div><div class="darken-8"></div>
<div class="lighten-9"></div><div class="darken-9"></div>
<div class="lighten-10"></div><div class="darken-10"></div>
<div class="lighten-11"></div><div class="darken-11"></div>
<div class="lighten-12"></div><div class="darken-12"></div>
<div class="lighten-13"></div><div class="darken-13"></div>
<div class="lighten-14"></div><div class="darken-14"></div>
<div class="lighten-15"></div><div class="darken-15"></div>
<div class="lighten-16"></div><div class="darken-16"></div>
<div class="lighten-17"></div><div class="darken-17"></div>
<div class="lighten-18"></div><div class="darken-18"></div>
<div class="lighten-19"></div><div class="darken-19"></div>
<div class="lighten-20"></div><div class="darken-20"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass/utilities/color/contrast";
$contrasted-dark-default: black;
$contrasted-light-default: white;
//Add your color in the variable $color1
$color1:#06669f;
.normal{
background:$color1;
width:100%;
height:100px;
&:after {
content:'#{$color1} - Base Color';
position:absolute;
text-align:center;
margin-left:42%;
padding-left:8px;
padding-top:30px;
@include contrasted($color1);
}
}
@for $i from 1 through 17 {
div.lighten-#{$i} {
$newColor: lighten($color1,5%*$i);
background:lighten($color1,5%*$i);
width:50%;
float:left;
height:100px;
@include contrasted($newColor);
}
$percentage: 5%*$i;
$color2: lighten($color1,5%*$i);
div.lighten-#{$i}:after {
content:'#{$color2} - '+$percentage;
position:absolute;
text-align:center;
margin-left:20%;
padding-left:8px;
padding-top:30px;
}
div.darken-#{$i} {
$newColor: darken($color1,5%*$i);
background:darken($color1,5%*$i);
width:50%;
float:left;
height:100px;
@include contrasted($newColor);
}
$percentage: 5%*$i;
$color3: darken($color1,5%*$i);
div.darken-#{$i}:after {
content:'#{$color3} - '+$percentage;
position:absolute;
text-align:center;
margin-left:20%;
padding-left:8px;
padding-top:30px;
}
}
//Page Specific Styles
h1{
text-align:center;
.lighten{
color:lighten($color1, 10%);
}
.darken{
color:darken($color1,10%);
}
}

The Sass Lighten and Darken Scale Helper

Using 5% increments, quickly see the varients of your color choice side by side for lighten and darken Sass functions

A Pen by Smartass.io on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment