postcss-interpolate
v1.1.4
Published
PostCSS plugin to interpolate everything
Downloads
12
Maintainers
Readme
PostCSS-Interpolate
PostCSS plugin for values interpolation between breakpoints.
This plugin made for automatically interpolation of property values between breakpoints. You can specify as much breakpoints, as you need.
Use this plugin for any px/rem value interpolation (font-size, padding, margin and other). It doesn't work with % and em.
Inspired by this draft.
Installation
$ npm i --save-dev postcss-interpolate
Syntax
interpolate(direction, mediaquery-1, value-1, ... mediaquery-n, value-n)
direction
- none — if you will not specify direction, plugin will you vertically as defaul direction
- vertically or vw — default derection.
- horizontally or vh
mediaquery
works only with px units
value
works only with px or rem units
Examples
More examples at the tests folder.
/* Input */
.foo {
font-size: interpolate(320px, 10px, 600px, 40px, 1200px, 10px);
}
/* Output */
.foo {
font-size: 10px;
}
@media screen and (min-width: 320px) {
.foo {
font-size: calc( 10px + 30 * (100vw - 320px) / 280);
}
}
@media screen and (min-width: 600px) {
.foo {
font-size: calc( 40px + -30 * (100vw - 600px) / 600);
}
}
@media screen and (min-width: 1200px) {
.foo {
font-size: 10px;
}
}
Padding example
/* Input */
.foo {
padding-top: interpolate(320px, 5px, 600px, 80px, 1200px, 5px);
}
/* Output */
.foo {
padding-top: 5px;
}
@media screen and (min-width: 320px) {
.foo {
padding-top: calc( 5px + 75 * (100vw - 320px) / 280);
}
}
@media screen and (min-width: 600px) {
.foo {
padding-top: calc( 80px + -75 * (100vw - 600px) / 600);
}
}
@media screen and (min-width: 1200px) {
.foo {
padding-top: 5px;
}
}
Usage
postcss([ require('postcss-interpolate') ])
If you are using postcss-cssnext, please, turn off pxrem plugin
postcssInterpolate(),
postcssCssnext({
features: {
rem: false,
}
})