Root & Body font-size

You can use Sailor config to automatically add - per breakpoint - values on your project root for body and root font-size.

The breakpoints map is required in your config file to use this feature.

Body size - Configuration

config.scss

$s-body-size: (
   'xs': 1.25rem,
   'md': 1.14rem,
   'lg': 1.06rem,
   'xxxl': 1rem,
),

Compiled output in :root

output.css

:root { --body-size: 1.25rem }
@media(min-width: 768px){ :root{--body-size: 1.14rem} }
@media(min-width: 1024px){ :root{--body-size: 1.06rem} }
@media(min-width: 1600px){ :root{--body-size: 1rem} }

How to use it

_partial.scss

body {
   font-size: var(--body-size);
}

Root size - Configuration

We recommend using percentage values for accessibility (increase font-size within the browser).

config.scss

$s-html-size: (
   'xs': 75%,
   'md': 87.5%,
   'lg': 100%,
   'xxxl': 112.5%,
),

Compiled output on html

output.css

html { font-size: 75% }
@media(min-width: 768px){ html{font-size: 87.5%} }
@media(min-width: 1024px){ html{font-size: 100%} }
@media(min-width: 1600px){ html{font-size: 112.5%} }