https://github.com/smichaelsen/scss-grow-linear-mixin

https://github.com/smichaelsen/scss-grow-linear-mixin

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/smichaelsen/scss-grow-linear-mixin
• Owner: smichaelsen
• Created: 2017-01-16T20:04:34.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-26T09:19:28.000Z (over 7 years ago)
• Last Synced: 2024-11-10T18:50:33.978Z (2 months ago)
• Language: CSS
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Sass mixin: `grow-linear`

## Basic usage

This mixin is useful if you want to define certain CSS values (like `font-size`) for certain breakpoints and want them

to grow linearly in between.

    h1 {

        $font-sizes: (

            320 20,

            640 30,

        );

        @include grow-linear(font-size, $font-sizes);

    }

    

This will make your `
` font-size 20px at a viewport width of 320px (and below) and 30px at 640px viewport width (and

above). Between those viewport widths the font-size grows linearly - so it will be 25px at 480px viewport width.


Be aware of the order of your screen size definitions. You may define as many as you like but they MUST be ascending.

## Named sizes

When you have layout files for certain screen sizes that you need to implement it can be useful to use *named sizes*.

    $sizes: (

        phone: 320,

        portrait: 768,

        landscape: 1024,

        desktop: 1440,

    )

    

    h1 {

        $font-sizes: (

            phone 20,

            portrait 30,

            desktop 35,

        );

        @include grow-linear(font-size, $font-sizes);

    }

## Credits

The logic of growing values linearly with the screen size is inspired by this video by Daniel Diekmeier

[![CSS: Interpolation, lineare Gleichungen und calc](https://img.youtube.com/vi/NeQrOPRqtr4/0.jpg)](https://www.youtube.com/watch?v=NeQrOPRqtr4)