Stretcher

Stretcher is a custom SCSS syntax for scaling values between two screen sizes.
The main use case of this package is to interpolate between values provided in a design. If given a mobile and desktop design, plugging in the values from each into your SCSS then interpolates all breakpoints in between.

Stretcher lines look like this: font-size: 12px -> 24px;
This means the following:

• Below our minimum screen size, font-size should be 12px
• Above our maximum screen size, font-size should be 24px
• In between these screen sizes, font-size should scale smoothly from 12px to 24px

It works with any fixed values:

width: 10px -> 20px;
width: 1em -> 5em;
width: 3rem -> 9rem;
width: 100cm -> 1000cm;

However, variable values (%, vw, vh, vmin, vmax) aren't calculated correctly in CSS so don't yet work as expected.

Stretcher pulls the min and max screen sizes from the SCSS variables, $stretcher-min and $stretcher-max
These can be defined at the global level:

$stretcher-min: 375px;
$stretcher-max: 1440px;

@import 'all-styles'

You can also define these within blocks, for overrides. This will change the values within this scope, but not the global values:

$stretcher-min: 375px;
$stretcher-max: 1440px;

.c-heading {
    $stretcher-min: 800px;
    $stretcher-max: 1200px;

    font-size: 10px -> 20px; // Screen widths 800px and 1200px
}

.c-subheading {
    font-size: 20px -> 30px; // Screen widths 375px and 1440px
}

For jekyll usage, use the jekyll-stretcher gem. This will then support the stretcher syntax anywhere in the SCSS pipeline [site, theme, ...]

group :jekyll_plugins do
    gem "jekyll-stretcher", "~> 0.1"
end

You may also need the following in you _config.yml

plugins:
  - jekyll-stretcher

If you're transforming SCSS files through webpack, you can use the stretcher-loader npm package.

...
{
    test: /\.scss$/,
    use: [
        ...
        'stretcher-loader'
        ...
    ]
}
...

If you're also compiling the SCSS through webpack, you'll need to use the importer below

For compiling SCSS anywhere that can use node-sass, you can use the stretcher-importer npm package. For example, in webpack:

...
{
    test: /\.scss$/,
    use: [
        ...
        {
            loader: 'sass-loader',
            options: {
                implementation: require("node-sass"),
                sassOptions: {
                    importer: require('stretcher-importer') // <--- here
                }
            }
        }
        ...
    ]
}
...