I did a talk the other night at Up Front Berlin about some use cases for features in Sass from the past year. The slides are here; but I wanted to publish some notes so this post is one part of those notes.
My talk focused on the
map data-type, and specifically on combining maps with directives such as
unique-id() in interesting ways. One of these is a mixin design pattern that solves some problems with using
@extendand placeholder (silent) selectors in Sass:
- having placeholder extensions appear somewhere way up in the top of your code, because that's where you imported them; and
- having to think about choosing
@extendin the first place.
This "self-aware" mixin works by creating (and extending) a placeholder selector for itself dynamically, the first time it is included, and uses a map to keep records of these includes, so when it is subsequently included with the same arguments it can extend the corresponding placeholder rather than repeating code.
In the following code, some of the mixin's arguments are used for this self-check, while others are considered to be optional and specific to each inclusion. In the resulting CSS you can see that 'common' styles have been extended (selectors combined) while specific styles have been output the normal way (selectors stand alone).
SCSS source and tests: