css - SCSS transition property overwrite -

i use @mixin add different transition properties elements. let's have in .scss:

@mixin transition($prop, $sec){   -webkit-transition: $prop $sec;   -moz-transition: $prop $sec;   -ms-transition: $prop $sec;   -o-transition: $prop $sec;   transition: $prop $sec; } 

then call:

.sample{   @include transition(background-color, 0.2s);   @include transition(margin, 0.3s) } 

.sample has got margin transition, want background-color transition: there simple way working?

it's important have different calls

there no way in sass concatenate properties , don't know if exists css external tool task. sass created improve css capabilities , not allow programmers develop bad programming practices. don't know purpose of create multiple css declaration statements when can keep them in single statement. keeping transitions in 1 statement improves considerably structure, workflow , performance of sass code.

ok, said, , have mentioned before "let horrible kludge be".

here 2 different mixins 1 shorthand transition declaration , long form, differences between them in processing , load time negligible, noticeable difference in style of 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;       }     }   }  } 

it's similar @leben mixin can use include 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 way implement in code

@include transition(background-color 0.2s, margin 0.3s); 

and now, solve problem "different calls" way deal them, in opinion, using append() list function.

let's go example. i'm going use shorthand mixin form because it's easier implement.

imagine have 4 pages, 3 partials (_variables.scss, _page1.scss, _page2.scss, _page3.scss) , style.scss file imports other:

_variables.scss

// here comes variable declaration $transition-list: color 1s; 

_page1.scss

// using append($list, $val, $separator:auto) list function // can add items $transition-list $transition-list: append($transition-list, margin 2s, comma); 

_page2.scss

// can add output of function @function example(){   @return unquote("background-color 1s") }  $transition-list: append($transition-list, example(), comma); 

style.scss

// can add new values same page $transition-list: append($transition-list, padding 4s, comma);  $transition-list: append($transition-list, border 10s, comma);  // , need use include generate final transition example {   @include transition($transition-list); } 

as i've said before, i don't recommend use method, it's not practice.