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 @content
, @at-root
, and unique-id()
in interesting ways. One of these is a mixin design pattern that solves some problems with using @extend
and 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
@include
vs.@extend
in 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:
smartmix.scss
CSS output:
smartmix.css