CSS Master

-moz-transition: height 500ms linear;

transition: height 500ms linear;

}

Theadvantageofusingamixinhereistwofold:itsavesussometyping,andit’s

easiertomaintain.Wecanjustremovetheprefixedpropertiesoncethey’renolonger

necessary.

Mixins in Sass

Sassmixinsuseasyntaxthat’sslightlymorecomplicatedthattheLessequivalent.

Theadvantageisthatit’sclearataglancewhatisandisn’tamixin.Sassmixins

alsodifferfromLessinthatthey’reneverincludedinthecompiledCSSoutput.

OurtransitionmixinwouldlooklikethisinSass:

@mixin transition($props) {

-webkit-transition: $props;

-moz-transition: $props;

transition: $props;

}

AddmixinstoyourSCSSusingthe@includedirective:

.fade {

@include transition(opacity 100ms linear);

}

.open {

@include transition(height 500ms linear);

}

ThecompiledoutputlookslikethisCSS:

.fade {

-webkit-transition: opacity 100ms linear;

-moz-transition: opacity 100ms linear;

transition: opacity 100ms linear;

}

.open {

-webkit-transition: height 500ms linear;

344 CSS Master