API

functions

sg-gradient

@function sg-gradient($direction, $color-stops...) { ... }
View source

Description

Instanciate a gradient

Parameters

parameter Name parameter Description parameter Type parameter Default value
$direction

Gradient direction

Direction none
$color-stops

List of color-stops

Arglist none

Returns

Gradient instance

Gradient

Example

Instanciating a new gradient

$gradient: sg-gradient(to right, hotpink 42%, tomato);

Throws

  • Throws an error if direction is invalid.

  • Throws an error if there is not at least 2 color-stops.

  • #{$direction} is not a valid direction for a gradient.

  • There should be at least 2 color-stops; #{length($color-stops)} given.

Requires

sg-get

@function sg-get($gradient, $key) { ... }
View source

Description

Property getter for a gradient

Parameters

parameter Name parameter Description parameter Type parameter Default value
$gradient

Gradient instance

Gradient none
$key

Key to fetch

String none

Returns

Any

Example

Getting the colors used in a Gradient

$gradient: sg-gradient(to right, hotpink 42%, tomato);
$colors: sg-get($gradient, "colors");
// hotpink, tomato

Throws

  • Throws an error if key doesn't exist.

  • Gradients do not have a key named #{$key}.

Used by

sg-stripes

@function sg-stripes($gradient) { ... }
View source

Description

Redefine the color-stops and length properties of the given gradient so they are perfect stripes.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$gradient

Gradient instance

Gradient none

Returns

Updated gradient instance

Gradient

Example

Turn a gradient into stripes

$gradient: sg-gradient(to right, hotpink 42%, tomato);
$gradient: sg-stripes($gradient);
.selector {
  @include sg-display($gradient);
}

Resulting CSS

.selector {
  background: hotpink;
  background: linear-gradient(to right, hotpink 50%, tomato 50%);
}

Requires

mixins

sg-display

@mixin sg-display($gradient, $fallback: sg-get($gradient, 'fallback')) { ... }
View source

Description

Display a gradient instance, with its fallback

Parameters

parameter Name parameter Description parameter Type parameter Default value
$gradient

Gradient instance

Gradient none
$fallback

Color of first color stop

Color sg-get($gradient, 'fallback')

Example

Displaying a gradient

$gradient: sg-gradient(to right, hotpink 42%, tomato);
.selector {
  @include sg-display($gradient);
}

Requires

sg-debug

@mixin sg-debug($gradient) { ... }
View source

Description

Debug a gradient instance at root level in a @debug-gradient rule

Parameters

parameter Name parameter Description parameter Type parameter Default value
$gradient

Gradient instance

Gradient none

Helpers

functions

[private] sg-get-next-full-color-stop-index

@function sg-get-next-full-color-stop-index($color-stops, $start-index: 1) { ... }
View source

Description

Return the position of the next full color stop.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$color-stops

List of color-stops

List none
$start-index

Start index

Number 1

Returns

Index or null

Number, Null

Used by

[private] sg-full-color-stops

@function sg-full-color-stops($color-stops) { ... }
View source

Description

Make sure all color-stops from the the list are full color-stops.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$color-stops

List of color-stops

List none

Returns

Updated color stops

List

Requires

Used by

[private] sg-get-colors

@function sg-get-colors($color-stops) { ... }
View source

Description

Extract colors from a list of color-stops. This is not part of the public API, please use sg-get($gradient, "colors") instead.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$color-stops

List of color-stops

List none

Returns

List of colors

List

Example

Extra colors from a list of color-stops

$gradient: sg-gradient(to right, hotpink 42%, tomato);
$colors: sg-get-colors(sg-get($gradient, "color-stops"));
// hotpink, tomato

Used by

[private] sg-is-direction

@function sg-is-direction($value) { ... }
View source

Description

Test whether a value is a direction for a gradient

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value

Value to test

Any none

Returns

Bool

Example

Test whether to right is a direction

$is-direction: sg-is-direction(to right);
// true

Test whether 42rad is a direction

$is-direction: sg-is-direction(42rad);
// true

Test whether 1337px is a direction

$is-direction: sg-is-direction(1337px);
// false

Used by

[private] sg-legacy-direction

@function sg-legacy-direction($value) { ... }
View source

Description

Convert a direction to legacy syntax

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value

Value to convert

Direction none

Returns

Legacy direction

Direction

Throws

  • Throws an error if input value is not a direction

  • Cannot convert #{$value} to legacy syntax because it doesn

Requires

Used by

[private] sg-compute-stripes

@function sg-compute-stripes($colors) { ... }
View source

Description

Turn a list of colors or color-stops into a list of stripes

Parameters

parameter Name parameter Description parameter Type parameter Default value
$colors

List of colors (or color-stops)

List none

Returns

List of full color-stops

List

Requires

Used by