It’s super simple to create a configuration file for instance that would manage your media query break points. You could also use a configuration file for managing colors, font sizes, and other variables such as gutter spacing and more.

For this example, we’ll look at creating 2 json configuration files to store our variables.

JSON File: media-query-break-points.json

{
  "mobile": "screen and (max-width:400px)",
  "tablet": {
    "landscape": "screen and (min-width:600px) and (orientation:landscape)",
    "portrait": "screen and (min-width:600px) and (orientation:portrait)"
  }
}

JSON File: colors.json

{
  "headerColor": "blue",
  "fontColor": "black"
}

Now we can include our 2 json files, and reference the variables we created within.

Stylus Code

json('media-query-break-points.json')
json('colors.json')

body
  color: fontColor

.page-header
  color: headerColor
  padding: 50px 0

  @media tablet-landscape
    padding: 25px 0

  @media mobile
    padding: 10px 0