Skip to content
This repository has been archived by the owner. It is now read-only.
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

[UNMAINTAINED] Sass helpers to manipulate gradients.

Resources

Releases

No releases published

Languages

You can’t perform that action at this time.