Unit
Functions
strip
@function strip($number) { ... }@function strip($number) { @if meta.type-of($number) == 'number' and not math.is-unitless($number) { @return math.div($number, $number * 0 + 1); } @return $number; }
Description
Remove the unit of a number length
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$number | Number to remove unit from | Number | — none |
Returns
Number —Unitless number
Used by
- [function]
convert
convert
@function convert($values, $unit: rem, $base: $baseline-font-size) { ... }@function convert($values, $unit: rem, $base: $baseline-font-size) { $result: (); @each $raw-value in $values { $unitless: math.is-unitless($raw-value); $compatible: math.compatible($raw-value, if($unit == 'em', 1em, 1rem)); // If number is already the unit, just return it as is @if (not $unitless and $compatible) or $raw-value == 0 { $result: list.append($result, $raw-value); } @else { $base: strip($base); $value: strip($raw-value); $new-unit: if($unit == 'em', 1em, 1rem); $rem-value: math.div($value, $base) * $new-unit; $result: list.append($result, $rem-value); } } // Return the plain value if it's just one. If a list with just one // value is returned, math functions might not work as expected. @if list.length($result) == 1 { @return list.nth($result, 1); } @return $result; }
Description
Convert pixel values to comparative relative unit values. Unitless values are supported and will be assumed to be equivalent to pixels.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$values | List of initial values to convert | Number | — none |
$unit | Unit of value to convert to ('em' or 'rem' only). | String | rem |
$base | Baseline font size, either root's or element's. | Number | $baseline-font-size |
Returns
Number —Relative unit number
Requires
- [function]
strip
rem
@function rem($values) { ... }@function rem($values) { @return convert($values); }
Description
Convert unitless or pixel values to comparative rem units. Calculation considers $baseline-font-size as the html root font size.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$values | List of initial values to convert | Number | — none |
Returns
Number —Values in rems
Requires
- [function]
convert
Used by
- [mixin]
root-container - [mixin]
dismiss-button - [mixin]
link - [function]
height-calc - [mixin]
base - [mixin]
cards - [mixin]
content - [mixin]
chip-deselected-styles - [mixin]
chip-choice-base-styles - [mixin]
chip-choice-selected-styles - [mixin]
chip-choice-hover-styles - [mixin]
range-control-native - [mixin]
range-track - [mixin]
range-thumb-focused - [mixin]
action - [mixin]
control-custom - [mixin]
label - [mixin]
button-common - [mixin]
wrapper - [mixin]
control-autofill - [mixin]
field-control - [mixin]
field-outline - [mixin]
autocomplete-listbox - [mixin]
field-textarea-outline - [mixin]
dismiss-button - [mixin]
default - [mixin]
caution - [mixin]
danger - [mixin]
base - [mixin]
spacing - [mixin]
container-spacing - [mixin]
item-spacing - [mixin]
item-span-width - [mixin]
item-offset-margin - [mixin]
root-container - [mixin]
status - [mixin]
item-active - [mixin]
selected-checkbox - [mixin]
container - [mixin]
cell-base - [mixin]
caption - [mixin]
icon-chewy-plus-width - [mixin]
container - [mixin]
label-small - [mixin]
label - [mixin]
content-small - [mixin]
spacing - [mixin]
flag - [mixin]
promotion-base - [mixin]
icon - [mixin]
detail - [mixin]
avatar-airy - [mixin]
avatar - [mixin]
step - [mixin]
root-container - [mixin]
icon-container - [mixin]
helper-text - [mixin]
title - [mixin]
panel - [mixin]
title-with-back - [mixin]
shape - [mixin]
line - [mixin]
root-container - [mixin]
image-swatch-header - [mixin]
swatch-shared-styles - [mixin]
nav - [mixin]
trigger - [mixin]
trigger - [function]
-get-spacing-value - [function]
get-properties - [mixin]
hide-label
em
@function em($values, $parent-font-size: $baseline-font-size) { ... }@function em($values, $parent-font-size: $baseline-font-size) { @return convert($values, 'em', $parent-font-size); }
Description
Convert unitless or pixel values to comparative em units. Calculation considers $baseline-font-size as the html root font size.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$values | List of initial values to convert | Number | — none |
$parent-font-size | Font size of parent element to calculate em unit | Number | $baseline-font-size |
Returns
Number —Values in ems
Requires
- [function]
convert
Used by
- [function]
get-formatted-breakpoint-size
negative
@function negative($args...) { ... }@function negative($args...) { $negatives: (); @if list.length($args) == 1 and meta.type-of(list.nth($args, 1)) == 'list' { @each $arg in list.nth($args, 1) { $negatives: list.append($negatives, calc(#{$arg} * -1)); } @return $negatives; } @each $arg in $args { $negatives: list.append($negatives, calc(#{$arg} * -1)); } @return $negatives; }
Description
Returns CSS calc() functions converting numerical custom properties to their negative counterparts
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$args... | Numerical custom properties | List | — none |
Returns
List —CSS calc() functions
Used by
- [mixin]
root-container