General
mixins
at-root
@mixin at-root($append-target, $appended-selector) { ... }Description
Use @at-root while adding classes (or attributes) $classes to an element node $append-target. If the element was not found a standard @at-root is used.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$append-target | $append-target string to append the classes (or attributes) to | String | — none |
$appended-selector | A single element selector containing classes and/or attributes to be appended | String | — none |
Requires
- [function]
selector-get-element-name
has-focus
@mixin has-focus($toggle) { ... }Description
Styles touch/hover states according to browser capabilities
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$toggle | State toggle; Available values: | Boolean | — none |
hide-text
@mixin hide-text() { ... }Description
Visually hide text but leave it accessible for screen readers and search engines
Parameters
None.
hide-visually
@mixin hide-visually() { ... }Description
Visually hide content but leave it accessible for screen readers and search engines
Parameters
None.
ios-native-scrolling
@mixin ios-native-scrolling($orientation) { ... }Description
Add ios native overflow scrolling to an element
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$orientation | The scroll direction | String | — none |
Throws
#{$orientation}must be eitherxory
is-selectable
@mixin is-selectable($toggle) { ... }Description
Controls the selection style of the current element and all its children
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$toggle | State toggle | Boolean | — none |
is-visible
@mixin is-visible($toggle, $speed, $transition-params) { ... }Description
Animates an element in or out, including setting their visibility correctly The basic opacity transition can be extended with other properties or full transition descriptors
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$toggle | State toggle | Boolean | — none |
$speed | The targeted speed after which the element is hidden | Number | — none |
$transition-params | One or more strings or lists containing additional transition params | ...string or ...list | — none |
Example
Simple usage: input
.my-elem.my-elem__is-hidden { @include dp-is-visible(false, 300ms); }
.my-elem.my-elem__is-shown { @include dp-is-visible(true, 300ms); }Output
css - Simple usage: output .my-elem.my-elem__is-hidden { transition: visibility 0ms linear 300ms, opacity 300ms ease 0ms; visibility: hidden; opacity: 0; } .my-elem.my-elem__is-shown { transition: visibility 0ms linear 0ms, opacity 300ms ease 0ms; visibility: inherit; opacity: 1; }
Throws
Provided transition speed
#{$speed}is not of type number!
last-row
@mixin last-row($num-cols) { ... }Description
Targets the last row in a grid of constant column count
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$num-cols | The number of columns within the context | Number | — none |
Links
overlay
@mixin overlay($pos, $root-y, $root-x) { ... }Description
Add styles for a child to overlay its parent
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$pos | A declaration value for the | String | — none |
$root-y | A vertical spacial property keyword | String | — none |
$root-x | A horizontal spacial property keyword | String | — none |
placeholder
@mixin placeholder() { ... }Description
Add styles to the placeholder element
Parameters
None.
functions
color-shade
@function color-shade($color, $percentage) { ... }Description
Slightly darken a color by mixing it with black
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Color to tint | Color | — none |
$percentage | Percentage of | Number | — none |
Returns
ColorLinks
color-tint
@function color-tint($color, $percentage) { ... }Description
Slightly lighten a color by mixing it with white
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Color to tint | Color | — none |
$percentage | Percentage of | Number | — none |
Returns
ColorLinks
is-truthy
@function is-truthy($value) { ... }Description
Check if a value has a truthy value
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$value | The input value | Any | — none |
Returns
Boolean —A flag indicating if the value is truthy
Used by
- [function]
list-purge - [function]
list-replace-nth - [function]
list-replace
list-concat
@function list-concat($list, $glue) { ... }Description
Concatenate a list using a given separator
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The list to be concatenated | List | — none |
$glue | A separator string to be inserted between items | String | — none |
Returns
String —A string containing list items connected with a separator string
Requires
- [function]
to-string
Links
list-contains
@function list-contains($list, $val) { ... }Description
Checks if a given list contains a certain value
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The haystack | List | — none |
$val | The needle | Any | — none |
list-expand-directions
@function list-expand-directions($list) { ... }Description
Expand a given list to 4 items, similar to css padding shorthand expressions. Inspired by expansions used in css shorthand expressions (eg. margin or padding).
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | List containing zero to four items | List | — none |
Returns
List —Updated list expanded to always four entries
list-first
@function list-first($list) { ... }Description
Return the first item of a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
Returns
The list's first item
Links
list-insert-nth
@function list-insert-nth($list, $index, $value) { ... }Description
Add a value to an arbitrary position
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$index | The value's target list position | Number | — none |
$value | The term to be added | Any | — none |
Returns
The output list
Links
list-last-index
@function list-last-index($list, $value) { ... }Description
Return the last occurence of an item within a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$value | The search term | Any | — none |
Returns
Number —The index of the search term's last occurrence within the list
Links
list-last
@function list-last($list) { ... }Description
Return the last item of a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
Returns
The list's last item
Links
list-prepend
@function list-prepend($list, $value) { ... }Description
Add a value to the front of a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$value | The term to be prepended | Any | — none |
Returns
The output list
Links
list-purge
@function list-purge($list) { ... }Description
Removes all non-true values from a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | A list containing possibly falsy values | List | — none |
Returns
List —The trimmed list
Requires
- [function]
is-truthy
Links
list-remove-nth
@function list-remove-nth($list, $index) { ... }Description
Remove a value at a certain index from a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$index | The target position to be removed | Number | — none |
Returns
The list's first item
Requires
- [function]
list-replace-nth
Links
list-remove
@function list-remove($list, $value) { ... }Description
Remove a value from a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$value | The term to be removed | Any | — none |
Returns
The list's first item
Requires
- [function]
list-replace
Links
list-replace-nth
@function list-replace-nth($list, $index, $value) { ... }Description
Replace a value within a list by index
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$index | The value's target list position | Number | — none |
$value | The term to be inserted | Any | — none |
Returns
The output list
Requires
- [function]
is-truthy
Used by
- [function]
list-remove-nth
Links
list-replace
@function list-replace($list, $old-value, $value) { ... }Description
Replace a value with another one in a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$old-value | The term that is being replaced | Any | — none |
$value | The term to replace it with | Any | — none |
Returns
The output list
Requires
- [function]
is-truthy
Used by
- [function]
list-remove
Links
list-slice
@function list-slice($list, $start, $end) { ... }Description
Return a number of values from a list
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | The input list | List | — none |
$start | The slice range's start index | Number | — none |
$end | The slice range's end index | Number | — none |
Returns
List —A list of items
Links
map-assign
@function map-assign($maps) { ... }Description
Takes multiple maps and merges them into one
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$maps | Any number of maps | ...map | — none |
Returns
Map —The resulting map
Links
map-deep-get
@function map-deep-get($map, $keys) { ... }Description
Returns a value from a nested list (without failsafe if one of the keys does not exist)
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Map | Map | — none |
$keys | Key chain | ...string | — none |
Returns
Desired value
Links
selector-get-element-name
@function selector-get-element-name($selector) { ... }Description
Remove classes, pseudo-classes and attributes from a selector part
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$selector | The selector part to be cleaned | String | — none |
Returns
StringRequires
- [function]
str-split
Used by
- [mixin]
at-root
str-replace
@function str-replace($string, $search, $replace) { ... }Description
Replace $search with $replace in $string
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | Initial string | String | — none |
$search | Substring to replace | String | — none |
$replace | ('') - New value | String | — none |
Returns
String —Updated string
Links
str-split
@function str-split($string, $delimiter) { ... }Description
Split $string into several parts using $delimiter.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to split | String | — none |
$delimiter | ('') - String to use as a delimiter to split | String | — none |
Returns
ListUsed by
- [function]
selector-get-element-name
strip-unit
@function strip-unit($number) { ... }Description
Remove the unit of a length
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$number | Number to remove unit from | Number | — none |
Returns
Number —Unitless number
to-string
@function to-string($value) { ... }Description
Cast an arbitrary value to a string
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$value | The original value | Any | — none |
Returns
String —The cast string
Used by
- [function]
list-concat
Links
transition-props
@function transition-props($trs-defintion, $props) { ... }Description
Batch transition all properties with a single transition definition
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$trs-defintion | The transition definition to be applied | String | — none |
$props | Any number of properties to be transitioned | ...map | — none |
Returns
List —A list to be used as a value for a transition property