@mixin color-weight ($class, $base-color, $weight: 4) { $bg-color: null; @for $i from 1 through 8 { @if $i < 4 { $weight: $weight - 1; $bg-color: lighten($base-color, $weight * 10%); } @else if $i == 4 { $weight: 0; $bg-color: $base-color; } @else { $weight: $weight + 1; $bg-color: darken($base-color, $weight * 10%); } .#{$class}-#{$i} { background-color: $bg-color; } } } @include color-weight(bg-blue, #1483ff); @include color-weight(mad, red);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter