How to define multiple media queries in one stylus file?

Question

How do I define multiple media queries in one file?

I have this .styl-file:

@media (min-width: 980px)
  body
    padding-top 60px

@media (min-width: 768px)
  body
    .container
      width 768px

This is giving me the error expected "indent", got "newline". Placing them in separate files and having one file include the other works. But when I have them in the same file and a second file that is importing this one it fails.

Update: The code of the files can be found here:

• https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/style.styl
• https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/nblog.styl

Answer 1

Your problem is that you have tabs in the top query, and spaces in the lower. Try to be consistent (this is a good practice in general, when it comes to all kinds of programming). I don't have a preference either way, but you should probably look into your editor settings to see if you can enforce consistency on that level. My editor puts 4 or 2 spaces when I press tab, depending on language.

Your example in the question works, actually (there's only spaces in that one).