Skip to content

Instantly share code, notes, and snippets.

@juice49
Created May 10, 2019 22:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Fluid values mixin for CSS-in-JS
const fluid = (properties, [ minVw, maxVw ], [ minVal, maxVal ]) => properties
.map(property => `
${property}: ${minVal};
@media (min-width: ${minVw}) {
${property}: calc(${minVal} + ${parseFloat(maxVal) - parseFloat(minVal)} * (100vw - ${minVw}) / ${parseFloat(maxVw) - parseFloat(minVw)});
}
@media (min-width: ${maxVw}) {
${property}: ${maxVal};
}
`)
.join('\n')
export default fluid
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment