[UNMAINTAINED] Sass helpers to manipulate gradients.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
sass
tests
.gitignore
.sassdocrc
README.md
TERMINOLOGY.md
package.json
sache.json

README.md

SassyGradients

Sass helpers to manipulate gradients. Read API documentation.

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