Search code examples
stylus

Can I do the reverse of @import in stylus?


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?


Solution

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