Een populaire manier om strepen te tekenen in CSS is om een lineair verloop te definiëren met overlappende kleurstops. Het werkt erg goed, maar is niet erg handig om met de hand te schrijven… Billion dollar idee: Sass gebruiken om het automatisch te genereren uit een lijst met kleuren!
/// Stripe builder /// @author Hugo Giraudel /// @param (Direction) $direction - Gradient direction /// @param (List) $colors - List of colors /// @output `background-image` if several colors, `background-color` if only one @mixin stripes($direction, $colors) ( $length: length($colors); @if $length > 1 ( $stripes: (); @for $i from 1 through $length ( $stripe: (100% / $length) * ($i - 1); @if $i > 1 ( $stripes: append($stripes, nth($colors, $i - 1) $stripe, comma); ) $stripes: append($stripes, nth($colors, $i) $stripe, comma); ) background-image: linear-gradient($direction, $stripes); ) @else if $length == 1 ( background-color: $colors; ) )Gebruik
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )Zie de pen a990b82465115c2b556f1b86bf4692c7 door Hugo Giraudel (@HugoGiraudel) op CodePen.