sass/rem-helper

Why

A project that has a conversion function (Foundation's rem-calc(), or its own rem() or to-rem()) has one place that knows the root font size. A hand-written math.div(24px, 16px) * 1rem, #{24 / 16}rem or calc(24rem / 16) copies that base into the stylesheet: when the base changes, or a reviewer looks for every size, the copies are missed and spacing drifts.

Fix

Call the project's helper with the design value in pixels: rem-calc(16px) (the helper is rem-calc, defined in the project's Sass functions). The rule runs only when the profile records the helper (profile.helpers["rem-function"]) and no build step converts px for you; raw px sizes are reported by css/rem-helper, this rule reports conversions written by hand.

Examples

// bad
.card { padding: math.div(24px, 16px) * 1rem; font-size: #{18 / 16}rem; }
// good
@use 'functions' as *;
.card { padding: rem-calc(24px); font-size: rem-calc(18px); }

Sources

• Foundation for Sites 6.9.0, scss/util/_unit.scss (the rem-calc function)
• Sass docs, @function
• Sass docs, sass:math (math.div)

Read it in the terminal

npx github:dawidolko/frontend-skills explain sass/rem-helper