-
-
Save cynthiateeters/28d886513b985c74889a35add33b22db to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use 'sass:color'; | |
| @use 'sass:list'; | |
| @use 'sass:math'; | |
| $start: red; | |
| $end: blue; | |
| @function gradient($space, $stops: 20) { | |
| $stops-list: ($start 0%,); | |
| @for $i from 1 through $stops { | |
| $percentage: math.div(100% * $i, ($stops + 1)); | |
| $color: color.mix($start, $end, 100% - $percentage, $space); | |
| $stops-list: list.join($stops-list, ($color $percentage,)); | |
| } | |
| @return linear-gradient(90deg, $stops-list, $end 100%); | |
| } | |
| .gradient { | |
| width: 100%; | |
| height: 100px; | |
| color: white; | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| margin-bottom: 5px; | |
| @each $space in srgb, srgb-linear, xyz-d50, xyz-d65, lab, lch, oklab, oklch { | |
| &.#{$space} { | |
| background: gradient($space); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment