Units

Unit conversion and manipulation functions for CSS values. These functions help you work with different CSS units, convert between them, and perform unit-related operations in your Sass code.

strip-units()

Removes units from a number.

Parameter	Type	Default Value	Description
$number	number	-	The number with units to strip

Usage

$unitless: strip-units(16px);
// Returns: 16

Result

16

units-are-same()

Determines whether two values have the same units.

Parameter	Type	Default Value	Description
$value1	number	-	The first value to compare
$value2	number	-	The second value to compare

Usage

$same: units-are-same(10px, 20px);
// Returns: true

Result

true

rem()

Converts pixels to rem units.

Parameter	Type	Default Value	Description
$value	number	-	The pixel value to convert
$ratio	number	10	The base ratio for conversion

Usage

$rem: rem(16px);
// Returns: 1.6rem

Result

1.6rem

em()

Converts pixels to em units.

Parameter	Type	Default Value	Description
$value	number	-	The pixel value to convert
$ratio	number	10	The base ratio for conversion

Usage

$em: em(16px);
// Returns: 1.6em

Result

1.6em

vh()

Calculates viewport height percentage using CSS custom properties.

Parameter	Type	Default Value	Description
$number	number	-	The percentage number

Usage

$height: vh(50);
// Returns: calc(50 * var(--vh, 1vh))

Result

calc(50 * var(--vh, 1vh))