Conversions
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 { @if $raw-value == 0 { $result: list.append($result, 0); } @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 | 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]
content
- [mixin]
dismiss-button
- [mixin]
link
- [mixin]
cards
- [mixin]
content
- [mixin]
chip-deselected-styles
- [mixin]
chip-choice-base-styles
- [mixin]
chip-choice-selected-styles
- [mixin]
chip-choice-hover-styles
- [mixin]
button-common
- [mixin]
field-control
- [mixin]
field-outline
- [mixin]
field-label
- [mixin]
autocomplete-listbox
- [mixin]
field-textarea-outline
- [mixin]
base
- [mixin]
spacing
- [mixin]
container-spacing
- [mixin]
item-spacing
- [mixin]
item-span-width
- [mixin]
item-offset-margin
- [mixin]
caption
- [mixin]
container
- [mixin]
label-small
- [mixin]
label
- [mixin]
content-small
- [mixin]
spacing
- [mixin]
title-with-back
- [function]
-transform-type-style
- [function]
get-type-style-property
- [function]
get-type-size
- [mixin]
style-as-type
- [function]
-get-spacing-value
- [function]
get-properties
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