सीएसएस में धारियों को खींचने का एक लोकप्रिय तरीका यह रंग-स्टॉपिंग के साथ एक रैखिक-ढाल को परिभाषित करने के लिए है। यह बहुत अच्छी तरह से काम करता है लेकिन हाथ से लिखने के लिए बहुत सुविधाजनक नहीं है ... अरब डॉलर का विचार: रंगों की सूची से स्वचालित रूप से इसे उत्पन्न करने के लिए सैस का उपयोग करना!
/// 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; ) )प्रयोग
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )पेन को a990b82465115c2b556f1b86bf4692c7 Hugo Giraudel (@HugoGiraudel) कोडपैन पर देखें।