Sugar allows you to easily manage and organize your transitions by giving them a name.


  • Allow you to register some transitions inside the settings using names
  • Apply your transitions with the @include s-transition($transitionName) mixin
  • Base transitions available:
    • slow : all .3s ease-in-out 0s
    • default : all .2s ease-in-out 0s
    • fast : all .1s ease-in-out 0s
  • Compose transitions
    • @include s-transition(fast opacity);

Setting up your transitions

To register a new filter, use the s-setup mixin like so:

@include s-setup((
    transitions : (
        fast : all .1s ease-in-out 0s

Use your transitions

To use your transitions inside your codebase, simply use the s-transition mixin like so:

.my-cool-element {
    // apply a registered transition
    @include s-transition(fast);
    // compose a transition
    @include s-transition(fast border-left);

Helper classes

Sugar have some helper classes that you can easily grab to use into your html. A bunch of these classes are transitions related like:

  • .tr-{filter-name} : Apply a specific transition

These classes are stored inside the sugar.transition namespace. Check out the helper classes documentation for more info...