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%} }