loading...

Drying Out CSS Selectors with Sass Maps

Claire Parker-Jones on April 23, 2018

First attempt: repetitive selectors I recently wrote some Sass code that looked similar to this: $color-apple: green; $color-lemon: ye...
pic
Editor guide
Collapse
baamenabar profile image
B. Agustín Amenábar Larraín

I just used this pattern last week to generate a bunch of "brand classes". It helps a lot with cleaning verbose files, and makes selectors very consistent.

But be aware that debugging a class generated like this can be tricky, even with sourcemaps.

Do not over use it, or maintenance will be hell for anyone not an expert in Sass.

A usually surround these tricks with thorough documentation in the comments.

Collapse
nektro profile image
Collapse
ben profile image
Collapse
briankephart profile image
Brian Kephart

Nice! I've been using Sass for awhile, and I didn't know about these features.

Collapse
dannetherton profile image
Dan Netherton 👨‍💻

I REALLY need to incorporate the use of SASS maps more in my projects. So useful!

Great post, Claire! 👍🏻

Collapse
rhymes profile image
rhymes

Amazing, didn't know scss could do that. Thank you!

Collapse
zeyduzgun profile image
Zeynep Düzgün

This is amazing though!