Named CSS Grid areas with Stylus

I recently started learning the new CSS Grids, and I love it! If you don’t know what CSS Grids are yet, you have to watch this talk by Morten Rand Hendriksen and this one by Rachel Andrew. They’re great, and I found them to be enough to start experimenting with grids.

CSS Grids bring a little bit of new syntax with them, and because currently I prefer to use Stylus as my preprocessor – I ran into this issue:

That sounds a little bit mysterious, but it’s caused by grid-template-columns

For example, when doing this:

Stylus doesn’t like those brackets. There is an open Github issue about this, and I posted this simple workaround there:

And while doing something like this does work:

To me, it still looks kind of ugly.

So this is what I came up with:

On top of being cleaner, PHPStorm recognizes variable names and makes them pretty with syntax highlighting.

And another added bonus – you can define a few named areas in a config stylus file, and then reuse them across your styles.
I’m not sure whether that’ll work for me, but that’s an option if I need one.

For now, I’ll probably keep the grid area name variables in the top of the file where I use them, that should be concise enough. I hope the bug gets fixed soon, but until then – this isn’t all that bad either.

Leave a Reply

Your email address will not be published. Required fields are marked *