Skip to content

Instantly share code, notes, and snippets.

@sirbrad
Created August 21, 2012 21:02
Show Gist options
  • Save sirbrad/3419385 to your computer and use it in GitHub Desktop.
Save sirbrad/3419385 to your computer and use it in GitHub Desktop.
create styleguide blocks
// Return the hex value of tint/shade
@function colorToString($color, $int) {
$output: $color;
@if $int == 0 {
$output: base + ' - ' + $color;
}
@return "" + $output + "";
}
// Tint on iteration
@for $i from 0 through 10 {
.tint-grey-#{$i * 10} {
background-color: tint($grey, $i * 10);
&:before {
content: '#{$i * 10}';
color: invert(tint($grey, $i * 10));
}
&:after {
content: colorToString(tint($grey, $i * 10), $i);
}
}
}
// A generated example
.tint-grey-10 {
background-color: #333;
&:before {
content: '10'; // how much tint out of 100
color: #999;
}
&:after {
content: '#333'; /// the colour that is generated so it is easily seen
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment