Instantly share code, notes, and snippets.

Embed
What would you like to do?
A media query template in styled components
// media.js
import { css } from 'styled-components'
const sizes = {
// default styles written mobile-first assuming 320px width
mbl: 375,
tab: 700,
desk: 990,
deskL: 1200,
}
// Iterate through the sizes and create a media template
const media = Object.keys(sizes).reduce((acc, label) => {
acc[label] = (...args) => css`
@media (min-width: ${sizes[label] / 16}em) {
${css(...args)};
}
`
return acc
}, {})
export default media
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment