In SASS, there is currently no built-in way to concatenate properties, and it's uncertain if there exists a CSS external tool to perform this task. The purpose of Sass is to enhance CSS capabilities, not promote bad programming practices by allowing developers to create multiple CSS declaration statements when they could be consolidated into a single statement. Consolidating all transitions into one statement significantly improves the structure, workflow, and performance of Sass code.
That being said, as you previously mentioned, sometimes you have to let the kludge be.
Here are two mixins for handling transition declarations—one for shorthand and one for the long form. The differences in processing and load time between them are negligible; the primary distinction lies in the stylistic presentation of your code.
Long form mixin
@mixin transition($properties, $durations, $timing-function: null, $delay: null) {
$declarations: (property, $properties),
(duration, $durations),
(timing-function, $timing-function),
(delay, $delay);
@each $declaration in $declarations {
@if nth($declaration, 2) {
$output: ();
@each $val in nth($declaration, 2) {
$output: append($output, $val, comma);
}
@each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' {
#{$prefix}transition-#{nth($declaration, 1)}: $output;
}
}
}
}
This mixin is similar to @LeBen's mixin but allows you to use the include statement with comma-separated arguments without quotes:
@include transition(background-color margin, 0.2s 0.3s);
Shorthand form
@mixin transition($declarations...) {
@each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' {
#{$prefix}transition: $declarations;
}
}
Here's how you can implement it in your code:
@include transition(background-color 0.2s, margin 0.3s);
To address the issue of handling "different calls," the only feasible approach, in my opinion, is to utilize the list function append().
Let's consider an example. Suppose you have four pages—three partials (_variables.scss, _page1.scss, _page2.scss, _page3.scss)—and a main style.scss file that imports them:
_VARIABLES.SCSS
// Variable declaration
$transition-list: color 1s;
_PAGE1.SCSS
// Using append($list, $val, $separator:auto) list function
$transition-list: append($transition-list, margin 2s, comma);
_PAGE2.SCSS
// Adding the output of a function
@function example(){
@return unquote("background-color 1s")
}
$transition-list: append($transition-list, example(), comma);
STYLE.SCSS
// Adding new values within the same page
$transition-list: append($transition-list, padding 4s, comma);
$transition-list: append($transition-list, border 10s, comma);
// Using the include to generate the final transition
example {
@include transition($transition-list);
}
As mentioned earlier, this method is not recommended as a best practice.