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