Linearly scale length from a minimum number at a smaller viewport to a maximum at a larger viewport.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4bec66d Jul 4, 2018
Permalink
Failed to load latest commit information.
.gitignore Update .gitignore Jul 2, 2018
LICENSE Create LICENSE Jul 2, 2018
README.md Update README.md Jul 4, 2018
_viewportscale.scss Rename _viewportsize.scss to _viewportscale.scss Jul 4, 2018

README.md

ViewportScale

Linearly scale length from a minimum number at a smaller viewport to a maximum at a larger viewport.

How to Use

  1. Import _viewportscale.scss in your sass file:

    @import "viewportscale";
  2. Now you can use the vs mixin like this:

    @include vs($min-viewport-width, $min-size, $max-viewport-width, $max-size, $property: "font-size");

Example 1

h1 {
    @include vs(320px, 32px, 960px, 48px);
}

This will be compiled to:

h1 {
    font-size: 32px;
}

@media screen and (min-width: 320px) {
    h1 {
        font-size: calc(2.5vw + 24px);
    }
}

@media screen and (min-width: 960px) {
    h1 {
        font-size: 48px;
    }
}

Example 2

.container {
    @include vs(320px, 16px, 960px, 24px, padding);
}

This will be compiled to:

.container {
    padding: 16px;
}

@media screen and (min-width: 320px) {
    .container {
        padding: calc(1.25vw + 12px);
    }
}

@media screen and (min-width: 960px) {
    .container {
        padding: 24px;
    }
}

License

MIT License