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:
Cannot read property 'clone' of undefined
That sounds a little bit mysterious, but it’s caused by grid-template-columns
For example, when doing this:
grid-template-columns: [x-start] 1fr [x-end]
Stylus doesn’t like those brackets. There is an open Github issue about this, and I posted this simple workaround there:
b(val) //b for bracket
unquote("[") + val + unquote("]")
And while doing something like this does work:
grid-template-columns: b(desc-start) 1fr b(thumb-start) 4rem b(desc-end) 1fr b(thumb-end)
To me, it still looks kind of ugly.
So this is what I came up with:
desc-start = b(desc-start)
desc-end = b(desc-end)
thumb-start = b(thumb-start)
thumb-end = b(thumb-end)
grid-template-columns: desc-start 1fr thumb-start 4rem desc-end 1fr thumb-end
grid-template-rows: thumb-start 1rem desc-start 1fr desc-end 1rem thumb-end
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.
Genius! You just saved me a lot of time.
Many thanks!