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

Pother

Which version of Stylus? It works for me with 0.24.0. – Servais

@LinusGThiel, I think I have version 0.24.0 as well. Is there an easy check to check the version? As I did it know I browsed down to the stylus.js file and checked the exported version. – Pother

I figured it out, it is the command npm ls. – Pother

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).

Servais

Oh, thank you. I'll try it later on and I'll try to configure my cloud 9 editor correct. – Pother

Cool. This is also why it worked when the queries were in separate files -- stylus is sensitive to mixed tabs and spaces, but it can handle both fine on their own (similar to most languages with significant whitespace). – Servais