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-extrasSupported browsers
Latest Chrome, Firefox, and Safari.
Usage
@import './node_modules/sass-extras/index';Or with sass-loader:
@import '~sass-extras/index';Docs
Related
- react-extras - Useful components and utilities for working with React
- modern-normalize - Normalize browsers' default style
Color
functions
tint
@function tint($color, $percentage) { ... }Description
Lighten a color by mixing it with white.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Color to lighten | Color | — none |
$percentage | Amount of white color to mix in | Number | — none |
Returns
ColorExample
a {
5 | color: tint(pink, 10%);
6 | }Output CSS
a {
7 | color: #ffc6d0;
8 | }shade
@function shade($color, $percentage) { ... }Description
Darken a color by mixing it with black.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Color to darken | Color | — none |
$percentage | Amount of black color to mix in | Number | — none |
Returns
ColorExample
a {
11 | color: shade(pink, 10%);
12 | }Output CSS
a {
13 | color: #e6adb7;
14 | }black
@function black($opacity) { ... }Description
Get the color black with a given $opacity.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$opacity | Opacity percentage | Number | — none |
Returns
ColorExample
a {
17 | color: black(10%);
18 | }Output CSS
a {
19 | color: rgba(0, 0, 0, 0.1);
20 | }white
@function white($opacity) { ... }Description
Get the color white with a given $opacity.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$opacity | Opacity percentage | Number | — none |
Returns
ColorExample
a {
23 | color: white(10%);
24 | }Output CSS
a {
25 | color: rgba(255, 255, 255, 0.1);
26 | }List
functions
list-first
@function list-first($list) { ... }Description
Get the first element of $list.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | — none | List | — none |
Returns
Example
@debug list-first((1, 2, 3));
29 | //=> 1list-last
@function list-last($list) { ... }Description
Get the last element of $list.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | — none | List | — none |
Returns
Example
@debug list-last((1, 2, 3));
32 | //=> 3Number
functions
strip-unit
@function strip-unit($number) { ... }Description
Strip the unit from a number.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$number | — none | Number | — none |
Returns
NumberExample
@debug strip-unit(5px);
35 | //=> 5number-clamp
@function number-clamp($number, $min, $max) { ... }Description
Clamp $number between $min and $max.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$number | Number to clamp | Number | — none |
$min | Minimum number | Number | — none |
$max | Maximum number | Number | — none |
Returns
NumberExample
@debug math-clamp(1, 2, 4);
38 | //=> 2number-invert
@function number-invert($number) { ... }Description
Invert a number.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$number | Number to invert | Number | — none |
Returns
NumberExample
@debug number-invert(5);
41 | //=> -5Random
functions
seed-random-integer
@function seed-random-integer($seed) { ... }Description
Generate a pseudorandom integer. Uses the Park-Miller algorithm.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$seed | The same | Number | — none |
Returns
NumberExample
@debug seed-random-integer(5);
52 | //=> 84035Used by
- [function]
seed-random-float - [function]
seed-random-boolean
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
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$seed | The same | Number | — none |
Returns
NumberExample
@debug seed-random-float(5);
57 | //=> 0.0000391314Requires
- [function]
seed-random-integer
seed-random-boolean
@function seed-random-boolean($seed) { ... }Description
Generate a pseudorandom boolean. Uses the Park-Miller algorithm.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$seed | The same | Number | — none |
Returns
BooleanExample
@debug seed-random-boolean(5);
60 | //=> falseRequires
- [function]
seed-random-integer
random-color
@function random-color($saturation: 0.5, $lightness: 0.5) { ... }Description
Get a random aesthetically pleasing color.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$saturation | Color saturation in the range | Number | 0.5 |
$lightness | Color lightness in the range | Number | 0.5 |
Returns
ColorExample
.foo {
66 | background-color: random-color();
67 | }Output CSS
.foo {
68 | background-color: random-color();
69 | }String
functions
string-contains
@function string-contains($string, $substring) { ... }Description
Check if $string contains the given $substring.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to check | String | — none |
$substring | Substring to search for in | String | — none |
Returns
BooleanExample
@debug string-contains('foo bar baz', $substring: 'bar');
72 | //=> truestring-starts-with
@function string-starts-with($string, $substring) { ... }Description
Check if $string starts with the given $substring.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to check | String | — none |
$substring | Substring to search for at the start of | String | — none |
Returns
BooleanExample
@debug string-starts-with('foo bar', $substring: 'foo');
75 | //=> truestring-ends-with
@function string-ends-with($string, $substring) { ... }Description
Check if $string ends with the given $substring.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to check | String | — none |
$substring | Substring to search for at the end of | String | — none |
Returns
BooleanExample
@debug string-ends-with('foo bar', $substring: 'bar');
80 | //=> truestring-replace
@function string-replace($string, $search, $replacement) { ... }Description
Replace substring $search in $string with $replacement.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to search | String | — none |
$search | Substring to search for in | String | — none |
$replacement | Replacement for | String | — none |
Returns
StringExample
@debug string-replace('foo bar baz', $search: 'bar', $replacement: 'unicorn');
92 | //=> 'foo unicorn baz'Used by
- [function]
url-encode - [function]
svg-url
General
functions
url-encode
@function url-encode($string) { ... }Description
Encode URL-unsafe characters in $string.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | — none | String | — none |
Returns
StringExample
@debug url-encode('#foo@bar');
124 | //=> '%23foo%40bar'Requires
- [function]
string-replace
Used by
- [function]
svg-url
svg-url
@function svg-url($svg) { ... }Description
Use SVG anywhere a url() is accepted, like in a background property.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$svg | SVG string. The | String | — none |
Example
body {
133 | background: svg-url('<svg>…</svg>');
134 | }Requires
- [function]
string-replace - [function]
url-encode
Used by
- [mixin]
background-svg
mixins
background-svg
@mixin background-svg($svg) { ... }Description
Set SVG as background-image.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$svg | SVG string. The | String | — none |
Example
body {
137 | @include background-svg('<svg>…</svg>');
138 | }Requires
- [function]
svg-url
context
@mixin context($changed, $to) { ... }Description
Include a block with a changed context.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$changed | Old parent selector. Any parent. | String | — none |
$to | New parent selector. Any parent. | String | — none |
Example
.tabs {
143 | .tab {
144 | background: pink;
145 |
146 | .icon {
147 | color: gray;
148 |
149 | @include context($changed: '.tab', $to: '.tab:hover') {
150 | color: blue;
151 | }
152 | }
153 | }
154 | }Output CSS
.tabs .tab {
155 | background: pink;
156 | }
157 | .tabs .tab .icon {
158 | color: gray;
159 | }
160 | .tabs .tab:hover .icon {
161 | color: blue;
162 | }variables
system-fonts
$system-fonts: 'system-ui',
163 | '-apple-system',
164 | 'Segoe UI',
165 | 'Roboto',
166 | 'Helvetica',
167 | 'Arial',
168 | 'sans-serif',
169 | 'Apple Color Emoji',
170 | 'Segoe UI Emoji' !default;Description
System font stack.
Type
List
Example
body {
171 | font-family: $system-fonts;
172 | }