Cara populer untuk menggambar garis di CSS untuk menentukan gradien linier dengan penghentian warna yang tumpang tindih. Ia bekerja sangat baik tetapi sangat tidak nyaman untuk menulis dengan tangan… Ide miliaran dolar: menggunakan Sass untuk secara otomatis menghasilkannya dari daftar warna!
/// 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; ) )Pemakaian
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )Lihat Pena a990b82465115c2b556f1b86bf4692c7 oleh Hugo Giraudel (@HugoGiraudel) di CodePen.