DEV Community

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: y...
Collapse
 
briankephart profile image
Brian Kephart

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

Collapse
 
nektro profile image
Meghan (she/her)

Wow! TIL

Collapse
 
ben profile image
Ben Halpern

Me too!

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
 
rhymes profile image
rhymes

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

Collapse
 
longchhun profile image
Longchhun

Enhancement using multiple value great tips.

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
 
zeyduzgun profile image
Zeynep Düzgün

This is amazing though!