Ένας δημοφιλής τρόπος για να σχεδιάσετε ρίγες σε CSS είναι να ορίσετε μια γραμμική κλίση με επικαλυπτόμενες στάσεις χρώματος. Λειτουργεί πολύ καλά, αλλά δεν είναι πολύ βολικό να γράφετε με το χέρι… Ιδέα δισεκατομμυρίων δολαρίων: χρησιμοποιώντας το Sass για να το δημιουργήσετε αυτόματα από μια λίστα χρωμάτων!
/// 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) στο CodePen.