Skip to content

Instantly share code, notes, and snippets.

@ShaggyDude
Created January 26, 2015 20:33
Show Gist options
  • Save ShaggyDude/7acd01afade185659039 to your computer and use it in GitHub Desktop.
Save ShaggyDude/7acd01afade185659039 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<s class='red-50'></s>
<s class='red-100'></s>
<s class='red-200'></s>
<s class='red-300'></s>
<s class='red-400'></s>
<s class='red-500'></s>
<s class='red-600'></s>
<s class='red-700'></s>
<s class='red-800'></s>
<s class='red-900'></s>
<br>
<s class='red-A100'></s>
<s class='red-A200'></s>
<s class='red-A400'></s>
<s class='red-A700'></s>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
s {display: block; padding: 5px;}
//$red: #DD2828;
$red: orange;
// color
$red-50: desaturate(lighten($red, 45), 15);
$red-100: desaturate(lighten($red, 40), 15);
$red-200: desaturate(lighten($red, 30), 15);
$red-300: desaturate(lighten($red, 20), 15);
$red-400: desaturate(lighten($red, 10), 15);
$red-500: desaturate(lighten($red, 0), 15);
$red-600: desaturate(darken($red, 5), 15);
$red-700: desaturate(darken($red, 10), 15);
$red-800: desaturate(darken($red, 15), 15);
$red-900: desaturate(darken($red, 20), 15);
$red-A100: saturate($red-100, 100);
$red-A200: saturate($red-200, 100);
$red-A400: saturate($red-400, 100);
$red-A700: saturate($red-700, 100);
.red-50 {background: $red-50;}
.red-100 {background: $red-100;}
.red-200 {background: $red-200;}
.red-300 {background: $red-300;}
.red-400 {background: $red-400;}
.red-500 {background: $red-500;}
.red-600 {background: $red-600;}
.red-700 {background: $red-700;}
.red-800 {background: $red-800;}
.red-900 {background: $red-900;}
.red-A100 {background: $red-A100;}
.red-A200 {background: $red-A200;}
.red-A400 {background: $red-A400;}
.red-A700 {background: $red-A700;}
s { display: block; padding: 5px; }
.red-50 { background: #fdf5e7; }
.red-100 { background: #fbecd0; }
.red-200 { background: #f7d9a1; }
.red-300 { background: #f4c671; }
.red-400 { background: #f0b342; }
.red-500 { background: #ec9f13; }
.red-600 { background: #d48f11; }
.red-700 { background: #bd800f; }
.red-800 { background: #a5700d; }
.red-900 { background: #8e600b; }
.red-A100 { background: #ffedcc; }
.red-A200 { background: #ffdb99; }
.red-A400 { background: #ffb733; }
.red-A700 { background: #cc8400; }
<s class='red-50'></s>
<s class='red-100'></s>
<s class='red-200'></s>
<s class='red-300'></s>
<s class='red-400'></s>
<s class='red-500'></s>
<s class='red-600'></s>
<s class='red-700'></s>
<s class='red-800'></s>
<s class='red-900'></s>
<br>
<s class='red-A100'></s>
<s class='red-A200'></s>
<s class='red-A400'></s>
<s class='red-A700'></s>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment