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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Number to remove unit from

Number none
Returns
Number

Unitless number

Used by

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

List of initial values to convert

Number none
$unit

Unit of value to convert to

Stringrem
$base

Baseline font size, either root's or element's.

Number$baseline-font-size
Returns
Number

Relative unit number

Requires
Used by
  • [function] rem
  • [function] em

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

List of initial values to convert

Number none
Returns
Number

Values in rems

Requires

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter 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

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$args...

Numerical custom properties

List none
Returns
List

CSS calc() functions

Used by