There are two biggest problems (IMO) for Custom Sets of Properties (aka mixins):
- Currently, there are implemented only in Chrome (behind a flag)
- You cannot pass variables to mixins:
E.g. take a look at the demo: http://codepen.io/malyw/pen/grRNZy
Inside of it I define a pure CSS triangle mixin, where
--triangle-to-bottom-size CSS variable is used to set the triangle size:
border-width: var(--triangle-to-bottom-size) ...
When I’m applying it, the browser just inlines the mixin value from a place, where it’s defined.
It means, if you try to apply a different value for a variable, used by the mixin (which is kinda passing of the variable as an argument in preprocessors), it simply doesn’t work:
--triangle-to-bottom-size: 10px; /* has no effect */
I would propose to consider both issues.
IMO passing variables to mixins is the biggest miss for the current mixins/@apply spec.
@tabatkins could apply this in the spec that way on purpose, but the ability is missed.