Sass helpers to manipulate gradients. Read API documentation.
To instantiate a new Gradient, use the exact same syntax as CSS with the sg-gradient function.
$gradient: sg-gradient(to bottom right, red 20%, yellow, green, blue 55%, red 55%, green);.selector {
@include sg-display($gradient);
}.selector {
background: red;
background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);
}As a default, the fallback color is the first color of the color-stop chain. If you wish to use a custom color, you can pass it as a second parameter to the sg-display mixin:
.selector {
@include sg-display($gradient, $fallback: blue);
}.selector {
background: blue;
background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);
}If you want SassyGradients to display the -webkit- version of your gradients, create a global sg-prefix variable set to true.
$sg-prefix: true !global;
.selector {
@include sg-display($gradient);
}.selector {
background: red;
background: -webkit-linear-gradient(top left, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);
background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);
}$new-gradient: sg-gradient(to bottom, sg-get($gradient, "color-stops"));// Adding a new color-stop
$new-gradient: sg-gradient(sg-get($gradient, "direction"), append(sg-get($gradient, "authored-color-stops"), hotpink, comma)...);
// Brand new color-stops
$new-gradient: sg-gradient(sg-get($gradient, "direction"), yellow, green, blue, purple, magenta);// New Gradient instance with updated `color-stops` and `length`
// Note that `authored-color-stops` does not change whatsoever
$stripes: sg-stripes($gradient);.debug {
@include sg-debug($gradient);
}@debug-gradient {
raw: ("fallback": red, "direction": to bottom right, "legacy-direction": top left, "authored-color-stops": (red 20%, yellow, green, blue 55%, red 55%, green), "color-stops": (red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%), "colors": (red, yellow, green, blue, red, green), "length": 6);
fallback: red;
direction: to bottom right;
legacy-direction: top left;
authored-color-stops: red 20%, yellow, green, blue 55%, red 55%, green;
color-stops: red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%;
colors: red, yellow, green, blue, red, green;
length: 6;
}$fallback: sg-get($gradient, "fallback");
// red
$direction: sg-get($gradient, "direction");
// to bottom right
$legacy-direction: sg-get($gradient, "legacy-direction");
// top left
$colors: sg-get($gradient, "colors"):
// red, yellow, green, blue, red, green
$color-stops: sg-get($gradient, "color-stops");
// red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%
$authored-color-stops: sg-get($gradient, "authored-color-stops");
// red 20%, yellow, green, blue 55%, red 55%, green
$length: sg-get($gradient, "length");
// 6
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent