Skip to content

Instantly share code, notes, and snippets.

@smlombardi

smlombardi/SassMeister-input-HTML.html

Created December 22, 2014 18:56
Show Gist options
  • Save smlombardi/d6354ed53fa2c68f5644 to your computer and use it in GitHub Desktop.
Save smlombardi/d6354ed53fa2c68f5644 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="blue1">&nbsp;</div>
<div class="blue2">&nbsp;</div>
<div class="blue3">&nbsp;</div>
<div class="blue4">&nbsp;</div>
<div class="blue5">&nbsp;</div>
<div class="blue6">&nbsp;</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
$pb-blue: rgb(62,83,164);
$blue1: $pb-blue;
$blue2: scale-color($pb-blue, $lightness: 20%, $saturation: -5%);
$blue3: scale-color($pb-blue, $lightness: 40%, $saturation: 0%);
$blue4: scale-color($pb-blue, $lightness: 50%, $saturation: -5%);
$blue5: scale-color($pb-blue, $lightness: 60%, $saturation: -10%);
$blue6: scale-color($pb-blue, $lightness: 70%, $saturation: -20%);
div {
width: 100px;
height: 100px;
}
.blue1 {
background-color: $blue1;
}
.blue2 {
background-color: $blue2;
}
.blue3 {
background-color: $blue3;
}
.blue4 {
background-color: $blue4;
}
.blue5 {
background-color: $blue5;
}
.blue6 {
background-color: $blue6;
}
Raw
SassMeister-output.css
div {
width: 100px;
height: 100px;
}
.blue1 {
background-color: #3e53a4;
}
.blue2 {
background-color: #5d71be;
}
.blue3 {
background-color: #8393d0;
}
.blue4 {
background-color: #9aa6d6;
}
.blue5 {
background-color: #afb9dd;
}
.blue6 {
background-color: #c5cbe4;
}
Raw
SassMeister-rendered.html
<div class="blue1">&nbsp;</div>
<div class="blue2">&nbsp;</div>
<div class="blue3">&nbsp;</div>
<div class="blue4">&nbsp;</div>
<div class="blue5">&nbsp;</div>
<div class="blue6">&nbsp;</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment