niceprototypes/super-gradient

SCSS gradient mixin w/ fallbacks

SuperGradient

SASS MULTI-COLOR GRADIENT MIXIN (LINEAR & RADIAL)

Options

$type: linear*, radial

$from: top*, left, top left, top right, bottom right, bottom left, center (radial)

$colors: hex, rgba

* default

Include

bower install super-gradient

super-gradient's Issues

Use `index` for `contains`

Use index or not not index if you absolutely want a boolean rather than using a loop for contains function.

@function contains($haystack, $needle) {
  @return not not index($haystack, $needle);
}

Output correct prefixes

See http://lea.verou.me/2013/04/can-we-get-rid-of-gradient-prefixes/ as a reference.

Tl;dr: use WebKit and standard only.

Use an arglist rather than a custom list

You could dramatically lighten your code by using an arglist rather than a custom-formatted list for color-stops. Then you would not need the colorString and colorSubString functions.

What about something like this (shorten on purpose)?

@mixin sgradient($direction, $type, $args...) {
  background: #{$type}-gradient($direction, $args...);
}

.element {
  @include sgradient(to bottom, linear, purple 0%, red 25%, yellow 50%, green 75%, blue 100%);
}

Use hyphens rather than camelCase

CSS (and Sass) is an hyphen-powered language. We don't use camelCase at all. You might want to stick to hyphen as a convention. :)