Frank Perez

Frank Perez

Keep in touch

An experienced Web Developer with years of experience in design, programming and server administration.



© 2024 by Frank Perez.

Creating Configuration Files In Stylus

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


  color: fontColor

  color: headerColor
  padding: 50px 0

  @media tablet-landscape
    padding: 25px 0

  @media mobile
    padding: 10px 0