A small collection of functions and mixins to help you make the most out of Sass's built-in random() function.
Ungrouped
functions
[private] _rando-unstring-unit
@function _rando-unstring-unit($unit) { ... }Description
Converts the return of unit() into a 0-value version of that length; e.g., 'px' becomes 0px.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$unit |
The string representation of the unit to be converted to a length value |
String | — none |
Used by
[private] _rando-map-to-list
@function _rando-map-to-list($map) { ... }Description
When passed a map, returns a list of every value in that map, no matter how deeply nested that map is.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map |
The map to convert into a list |
String | — none |
Used by
rando
@function rando($limit) { ... }Description
Just like Sass' built-in random(), except that it will preserve length units.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$limit |
the maximum value to be randomized |
Number | — none |
Example
// SCSS
div.widget {
height: rando(10px);
}// CSS
div.widget {
height: 7px;
}Requires
Used by
rando-between
@function rando-between($min, $max) { ... }Description
Generates a random integer within a range, inclusive of both the minimum and maximum values passed in (so, for example, a call of this function with a $min of 5 could potentially return 5). Preserves length units.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$min |
The lowest integer |
Number | — none |
$max |
The highest integer |
Number | — none |
Example
// SCSS
div.widget {
width: rando-between(30px, 100px);
}// CSS
div.widget {
width: 58px;
}Requires
rando-decimal-between
@function rando-decimal-between($min, $max) { ... }Description
Generates a random decimalized number within a given range, inclusive of both the minimum and maximum values passed in (so, for example, a call of this function with a $min of 0.1 could potentially return 0.1). Preserves length units.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$min |
The lowest number |
Number | — none |
$max |
The highest number |
Number | — none |
Example
// SCSS
div.widget {
width: rando-decimal-between(30.5px, 30.9px);
}// CSS
div.widget {
width: 30.79564px;
}rando-roll
@function rando-roll($die) { ... }Description
Generates a value from a simulated dice roll. The input is in the form of, for instance, 2d6 to refer to rolling two six-sided dice; 5d8 to refer to rolling five eight-sided dice; and so on.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$die |
The number and type of dice to roll |
Number | — none |
Example
// SCSS
div {
height: 2d6 * 10px;
}// CSS
div {
height: 80px;
}rando-color
@function rando-color() { ... }Description
Generates a random RGB value.
Parameters
None.
Example
// SCSS
span {
color: rando-color();
background: rgba(rando-color(), .8);
}// CSS
span {
color: #4c3b2e;
background: rgba(169, 93, 82, 0.8);
}rando-from-list
@function rando-from-list($value-list) { ... }Description
Given a list, returns a random item from that list.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$value-list |
The list of values to randomly select from |
List | — none |
Example
// SCSS
div {
animation: 2s ease random-value(ease ease-in-out linear);
border-radius: random-value((2rem, 5px, 10%));
}// CSS
div {
animation: 2s ease linear;
border-radius: 5px;
}Used by
rando-from-map
@function rando-from-map($map) { ... }Description
Given a map, including maps that have maps inside of maps inside of maps inside of them (and so on), returns a random value from that map.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map |
The map to be parsed |
Map | — none |
Example
// SCSS
div {
animation: 2s ease random-value(ease ease-in-out linear);
border-radius: random-value((2rem, 5px, 10%));
}// CSS
div {
animation: 2s ease linear;
border-radius: 5px;
}Requires
rando-shuffle
@function rando-shuffle($list) { ... }Description
Given a list, applies a Fisher-Yates shuffle to that list.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list |
The list to shuffle |
List | — none |
Example
// SCSS
$colors: red, orange, yellow, blue, green;
$colors: shuffle($colors);
div:after {
content: $colors;
}// CSS
div: after {
content: blue, yellow, red, orange, green;
}