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