Skip to content
This repository has been archived by the owner on Mar 6, 2021. It is now read-only.

KittyGiraudel/SassyGradients

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

About

[UNMAINTAINED] Sass helpers to manipulate gradients.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages