Awesome
SassyGradients
Sass helpers to manipulate gradients.
Instantiate
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);
Display
.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%);
}
Enable vendor prefixes
If you want SassyGradients to display the -webkit-
version of your gradients, create a global sg-prefix
variable set to true
.
$sg-prefix: true;
.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%);
}
Update direction
$new-gradient: sg-gradient(to bottom, sg-get($gradient, 'color-stops'));
Update 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);
Create stripes
// New Gradient instance with updated `color-stops` and `length`
// Note that `authored-color-stops` does not change whatsoever
$stripes: sg-stripes($gradient);
Debug
.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;
}
Access specific properties
$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