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 @import
s 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?
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.