Skip to content

Instantly share code, notes, and snippets.

@smlombardi

smlombardi/SassMeister-input-HTML.html

Created December 23, 2014 16:32
Show Gist options
  • Save smlombardi/f994798d5272c7bd614b to your computer and use it in GitHub Desktop.
Save smlombardi/f994798d5272c7bd614b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="color1">&nbsp;</div>
<div class="color2">&nbsp;</div>
<div class="color3">&nbsp;</div>
<div class="color4">&nbsp;</div>
<div class="color5">&nbsp;</div>
<div class="color6">&nbsp;</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
$pb-light-gray: rgb(192,192,192);
$pb-medium-gray: rgb(155,155,155);
$pb-dark-gray: rgb(78,78,78);
$pb-black: rgb(0,0,0);
// GRAY TINTS (grayscale charts)
$gray1: darken($pb-dark-gray, 5%);
$gray2: $pb-dark-gray;;
$gray3: lighten($pb-dark-gray, 10%);
$gray4: lighten($pb-dark-gray, 20%);
$gray5: $pb-medium-gray;
$gray6: $pb-light-gray;
div {
width: 100px;
height: 100px;
float: left;
}
.color1 {
background-color: $gray1;
}
.color2 {
background-color: $gray2;
}
.color3 {
background-color: $gray3;
}
.color4 {
background-color: $gray4;
}
.color5 {
background-color: $gray5;
}
.color6 {
background-color: $gray6;
}
Raw
SassMeister-output.css
div {
width: 100px;
height: 100px;
float: left;
}
.color1 {
background-color: #414141;
}
.color2 {
background-color: #4e4e4e;
}
.color3 {
background-color: #686868;
}
.color4 {
background-color: #818181;
}
.color5 {
background-color: #9b9b9b;
}
.color6 {
background-color: silver;
}
Raw
SassMeister-rendered.html
<div class="color1">&nbsp;</div>
<div class="color2">&nbsp;</div>
<div class="color3">&nbsp;</div>
<div class="color4">&nbsp;</div>
<div class="color5">&nbsp;</div>
<div class="color6">&nbsp;</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment