Sass functions
Ems and rems help make a website more responsive than pixels (but it’s still easier to think in pixels), so we have a few Sass functions that convert px to em or rem.
Learn how to use Sass functions.
Stylesheet location: /_source/styles/base/_mixins.scss
Jump to a component:
General – px to rem
We opted for rem rather than em because it’s easier to convert 1-to-1 px to rem, since rem is only based on the global px size rather than the parent element’s size.
Example of General – px to rem
@function toRem($value) {
$remValue:calc($value / 16) + rem; // match the number to $text-base minus the "px"
@return$remValue;
}
p {padding:toRem(10);} // 0.625rem (10px)
Font size – em
Ems are usually the safe bet for setting font size, so use this in most cases. More information about how to use the function is on the typography basics page under “development info”.
Example of Font size – em
@function em($pixels, $context: $text-base) {
@return #{calc($pixels/$context)}em;
}
p {font-size:em($text-base);} // 1em (16px)
span {font-size:em($text-base - 2);} // 0.875em (14px)
Font size – rem
In some situations, rems are more useful than ems. More information about how to use the function is on the typography basics page under “development info”.
Example of Font size – rem
@function rem($pixels, $context: $text-base) {
@return #{calc($pixels/$context)}rem;
}
p {font-size:rem($text-base);} // 1rem (16px)
span {font-size:rem($text-base - 2);} // 0.875rem (14px)