Can I do the reverse of @import in stylus?

Question

One of the things I do repeatedly is that every time I add a page to a section of my website, with its own styles (which reside in a .styl file), I have to go back to my main.styl and add an @import statement.

If I only have one layout, I'd simply import a whole directory of individual .styl files, but I often use a mobile and desktop, or a standard and minimal layout, and it would be relevant to be able to include only the relevant @imports in the appropriate main.styl file (in my case standard.styl and minimal.styl).

Is there anyway to tell a .styl file that it's content should be included in some other .styl file?

Answer 1

There is not such a feature in Stylus (or other preprocessors that I know of), but you can hack around it by using the conditions and variables. For Stylus this could look somehow like this:

// standard.styl

$context = 'standard'
@import 'lib/*.styl'

And

// minimal.styl

$context = 'minimal'
@import 'lib/*.styl'

And then you could write any of your included files by wrapping all their contents in the conditions:

// myBlock.styl

if $context == 'standard'
  .myBlock
    display: block

You could even mix different contexts in one file, or even for one block.

However, in my opinion, it is often to easier to handle all of these things by using media queries for each of the variant, but maybe you have an environment where they won't fit? Then such splitting by conditions should work perfectly.

Answer 2

"reverse import", that is, using a directive to say that a particular file should be imported in another file is not supported by neither Sass or Less.

"Glob importing" is also not natively supported by either. For Less, however, this has been implemented as a plugin: https://github.com/just-boris/less-plugin-glob.