sass-extras

Useful utilities for working with Sass

It includes functions for using SVG inline, generating random colors, system font stack, PRNG, and more…

Install

npm install sass-extras

Supported browsers

Latest Chrome, Firefox, and Safari.

Usage

@import './node_modules/sass-extras/index';

Or with sass-loader:

@import '~sass-extras/index';

Docs

Read the docs.

Color

functions

tint

@function tint($color, $percentage) { ... }

Description

Lighten a color by mixing it with white.

Parameters

NameDescriptionTypeDefault value
$color

Color to lighten

Color—
$percentage

Amount of white color to mix in

Number—

Returns

Color

Example

a {
	color: tint(pink, 10%);
}

Output CSS

a {
	color: #ffc6d0;
}

shade

@function shade($color, $percentage) { ... }

Description

Darken a color by mixing it with black.

Parameters

NameDescriptionTypeDefault value
$color

Color to darken

Color—
$percentage

Amount of black color to mix in

Number—

Returns

Color

Example

a {
	color: shade(pink, 10%);
}

Output CSS

a {
	color: #e6adb7;
}

black

@function black($opacity) { ... }

Description

Get the color black with a given $opacity.

Parameters

NameDescriptionTypeDefault value
$opacity

Opacity percentage

Number—

Returns

Color

Example

a {
	color: black(10%);
}

Output CSS

a {
	color: rgba(0, 0, 0, 0.1);
}

white

@function white($opacity) { ... }

Description

Get the color white with a given $opacity.

Parameters

NameDescriptionTypeDefault value
$opacity

Opacity percentage

Number—

Returns

Color

Example

a {
	color: white(10%);
}

Output CSS

a {
	color: rgba(255, 255, 255, 0.1);
}

List

functions

list-first

@function list-first($list) { ... }

Description

Get the first element of $list.

Parameters

NameDescriptionTypeDefault value
$list—List—

Returns

Any type

Example

@debug list-first((1, 2, 3));
//=> 1

list-last

@function list-last($list) { ... }

Description

Get the last element of $list.

Parameters

NameDescriptionTypeDefault value
$list—List—

Returns

Any type

Example

@debug list-last((1, 2, 3));
//=> 3

Number

functions

strip-unit

@function strip-unit($number) { ... }

Description

Strip the unit from a number.

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number

Example

@debug strip-unit(5px);
//=> 5

number-invert

@function number-invert($number) { ... }

Description

Invert a number.

Parameters

NameDescriptionTypeDefault value
$number

Number to invert

Number—

Returns

Number

Example

@debug number-invert(5);
//=> -5

Random

functions

seed-random-integer

@function seed-random-integer($seed) { ... }

Description

Generate a pseudorandom integer. Uses the Park-Miller algorithm.

Parameters

NameDescriptionTypeDefault value
$seed

The same $seed will generate the same number

Number—

Returns

Number

Example

@debug seed-random-integer(5);
//=> 84035

Used by

seed-random-float

@function seed-random-float($seed) { ... }

Description

Generate a pseudorandom float. Uses the Park-Miller algorithm.

Note: You'll need to increase the default Sass precision to at least 10 for this method to be useful.

Parameters

NameDescriptionTypeDefault value
$seed

The same $seed will generate the same number

Number—

Returns

Number

Example

@debug seed-random-float(5);
//=> 0.0000391314

Requires

Used by

seed-random-boolean

@function seed-random-boolean($seed) { ... }

Description

Generate a pseudorandom boolean. Uses the Park-Miller algorithm.

Parameters

NameDescriptionTypeDefault value
$seed

The same $seed will generate the same number

Number—

Returns

Boolean

Example

@debug seed-random-boolean(5);
//=> false

Requires

random-color

@function random-color($saturation: 0.5, $lightness: 0.5, $seed: null) { ... }

Description

Get a random aesthetically pleasing color.

Parameters

NameDescriptionTypeDefault value
$saturation

Color saturation in the range 0...1

Number0.5
$lightness

Color lightness in the range 0...1

Number0.5
$seed

Optional seed for deterministic color generation

Numbernull

Returns

Color

Example

.foo {
	background-color: random-color();
}
.bar {
	background-color: random-color($seed: 42);
}

Output CSS

.foo {
	background-color: random-color();
}

Requires

String

functions

string-contains

@function string-contains($string, $substring) { ... }

Description

Check if $string contains the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for in $string

String—

Returns

Boolean

Example

@debug string-contains('foo bar baz', $substring: 'bar');
//=> true

string-starts-with

@function string-starts-with($string, $substring) { ... }

Description

Check if $string starts with the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for at the start of $string

String—

Returns

Boolean

Example

@debug string-starts-with('foo bar', $substring: 'foo');
//=> true

string-ends-with

@function string-ends-with($string, $substring) { ... }

Description

Check if $string ends with the given $substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check

String—
$substring

Substring to search for at the end of $string

String—

Returns

Boolean

Example

@debug string-ends-with('foo bar', $substring: 'bar');
//=> true

string-replace

@function string-replace($string, $search, $replacement) { ... }

Description

Replace substring $search in $string with $replacement.

Parameters

NameDescriptionTypeDefault value
$string

String to search

String—
$search

Substring to search for in $string

String—
$replacement

Replacement for $search

String—

Returns

String

Example

@debug string-replace('foo bar baz', $search: 'bar', $replacement: 'unicorn');
//=> 'foo unicorn baz'

Used by

General

functions

url-encode

@function url-encode($string) { ... }

Description

Encode URL-unsafe characters in $string.

Parameters

NameDescriptionTypeDefault value
$string—String—

Returns

String

Example

@debug url-encode('#foo@bar');
//=> '%23foo%40bar'

Requires

Used by

svg-url

@function svg-url($svg) { ... }

Description

Use SVG anywhere a url() is accepted, like in a background property.

Parameters

NameDescriptionTypeDefault value
$svg

SVG string. The xmlns attribute is added for you.

String—

Example

body {
	background: svg-url('<svg>…</svg>');
}

Requires

Used by

mixins

background-svg

@mixin background-svg($svg) { ... }

Description

Set SVG as background-image.

Parameters

NameDescriptionTypeDefault value
$svg

SVG string. The xmlns attribute is added for you.

String—

Example

body {
	@include background-svg('<svg>…</svg>');
}

Requires

context

@mixin context($changed, $to) { ... }

Description

Include a block with a changed context.

Parameters

NameDescriptionTypeDefault value
$changed

Old parent selector. Any parent.

String—
$to

New parent selector. Any parent.

String—

Example

  .tabs {
  	.tab {
  		background: pink;

  		.icon {
  			color: gray;

  			@include context($changed: '.tab', $to: '.tab:hover') {
  				color: blue;
  			}
  		}
  	}
}

Output CSS

.tabs .tab {
	background: pink;
}
.tabs .tab .icon {
	color: gray;
}
.tabs .tab:hover .icon {
	color: blue;
}

variables

system-fonts

$system-fonts: 'system-ui',
	'-apple-system',
	'Segoe UI',
	'Roboto',
	'Helvetica',
	'Arial',
	'sans-serif',
	'Apple Color Emoji',
	'Segoe UI Emoji' !default;

Description

System font stack.

Type

List

Example

body {
	font-family: $system-fonts;
}