Một cách phổ biến để vẽ các đường sọc trong CSS đó là nó để xác định gradient tuyến tính với các điểm dừng màu chồng chéo. Nó hoạt động rất tốt nhưng không thuận tiện lắm khi viết bằng tay… Ý tưởng tỷ đô: sử dụng Sass để tự động tạo ra nó từ một danh sách các màu!
/// 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; ) )Sử dụng
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )Xem Bút a990b82465115c2b556f1b86bf4692c7 của Hugo Giraudel (@HugoGiraudel) trên CodePen.