Rem

When creating front-end code which is resposive and respects a user's browser settings, rem is the recommended unit to use over the traditional px unit.

Typically, determining a rem value involves calculating it manually using the px value from the website design, or using an online tool. The rem mixin simplifies this process and does the calculation for you, converting px to rem automatically based on the root font size defined in the $global-font-size variable.

All numeric sizings should use this mixin, as using px values is no longer considered best practice. There are a few exceptions though, mainly to do with usage around native CSS functions such as calc().

For more information on why rem is the preferred unit, check out this article or this one.

Source

Contributors

Usage

.c-my-component {
	border: rem(1px) solid black;
	width: rem(350px);
	height: rem(350px);
}