part from from styles

animations.styl

.pages

  .page

    &.develop.anim
      background darken($green, 10%)
      backTrans()

      .inner

        button.chip
          border 3px dotted darken($green, 10%)
          //if nedd nore than 1 use addTrans anim1, anim2 without brackes
          addTrans($trans-border)
          
    &.scaleDown
      animation scaleDown .7s ease both

    &.scaleUpDown
      animation scaleUpDown .5s ease both
      z-index 101 
.....

mixin.styl

addTrans()
  if arguments
    arguments=arguments,
  transition arguments $trans-btn

backTrans()
  transition background 1.5s linear .7s
  
_alpha(color, n = .06)
  rgba(color, n)

$delay = .05s
$input-time = .3s

placeholder(_color = $placeholder-color, type = ease-out) {
  &:-moz-placeholder            { color: _color; -moz-transition: color $input-time type; }
  &::-moz-placeholder           { color: _color; -moz-transition: color $input-time type; }
  &:-ms-input-placeholder       { color: _color; -ms-transition: color $input-time type $delay; }
  &::-webkit-input-placeholder  { color: _color; -webkit-transition: color $input-time type $delay; }
}

.....

style.styl

support-for-ie ?= false
@import 'nib'
@import 'variables'
@import 'mixin'

global-reset()
reset-html5()

@import 'keyframes'
@import 'animations'

......

variables.styl

$trans-btn = background .4s ease-out

$placeholder-color = lightness($contact-color, 50%)