Our existing transition mixin only allows for a single transition to be declared, though the spec allows for a comma-separated list of transitions on an element. This means developers are frequently writing the non-mixin version longhand. Admittedly, the longhand isn't that much longer, but it doesn't allow for defaults or skipped declarations (transition: opacity; is invalid, for instance, as is transition: opacity .3; (no time unit will blow up the declaration)). Which is where mixins are valuable (he says, to the chorus).
Something like transition($properties...);would allow for multiple declarations, so long as they were syntactically correct. But since we're doing the work, it seems better to go the next step and allow some flexibility and defaults if, for instance, you wanted multiple transitions with different timing or easing. This is what the options map allows for now on the single property; I'm not sure how to implement that for each declared property (and Sass doesn't allow you to combine maps and variable-length parameters in a mixin anyway, so…). However, something like transition(opacity .2s linear, top, max-height .4 .1 ease-in-out), where top would get the defined defaults and max-height would get some linting for those missing time units seems a reasonable expectation. This would require some logic and list traversing in the mixin, but seems worth it to me.
Our existing transition mixin only allows for a single transition to be declared, though the spec allows for a comma-separated list of transitions on an element. This means developers are frequently writing the non-mixin version longhand. Admittedly, the longhand isn't that much longer, but it doesn't allow for defaults or skipped declarations (
transition: opacity;is invalid, for instance, as istransition: opacity .3;(no time unit will blow up the declaration)). Which is where mixins are valuable (he says, to the chorus).Something like
transition($properties...);would allow for multiple declarations, so long as they were syntactically correct. But since we're doing the work, it seems better to go the next step and allow some flexibility and defaults if, for instance, you wanted multiple transitions with different timing or easing. This is what the options map allows for now on the single property; I'm not sure how to implement that for each declared property (and Sass doesn't allow you to combine maps and variable-length parameters in a mixin anyway, so…). However, something liketransition(opacity .2s linear, top, max-height .4 .1 ease-in-out), wheretopwould get the defined defaults andmax-heightwould get some linting for those missing time units seems a reasonable expectation. This would require some logic and list traversing in the mixin, but seems worth it to me.Thoughts?