
for $i, $index in 5 16 32

  //padding
  .pd{$index+1}
    padding ($i)px

  .pd{$index+1}x
    padding-left ($i)px
    padding-right ($i)px

  .pd{$index+1}l
    padding-left ($i)px
  
  .pd{$index+1}r
    padding-right ($i)px
    
  .pd{$index+1}y
    padding-top ($i)px
    padding-bottom ($i)px

  .pd{$index+1}t
    padding-top ($i)px
  
  .pd{$index+1}b
    padding-bottom ($i)px

  //margin
  .mg{$index+1}
    margin ($i)px
    
  .mg{$index+1}x
    margin-left ($i)px
    margin-right ($i)px

  .mg{$index+1}l
    margin-left ($i)px
  
  .mg{$index+1}r
    margin-right ($i)px
    
  .mg{$index+1}y
    margin-top ($i)px
    margin-bottom ($i)px

  .mg{$index+1}t
    margin-top ($i)px
  
  .mg{$index+1}b
    margin-bottom ($i)px

.mg-auto
  margin-left auto
  margin-right auto
.mg0
  margin 0
.pd0
  padding 0
  
.block
  display block

.inline
  display inline-block

.iblock
  display inline-block
  vertical-align middle

.hide
  display none

.hidden
  visibility hidden

.fleft
  float left

.fright
  float right

.fcenter
  float center

.fix:before,
.fix:after
  content " "
  display table

.fix
  &:after
    clear both

.overhide
  overflow hidden

.overscroll
  overflow auto

.overscroll-y
  overflow-y auto

.relative
  position relative
.absolute
  position absolute
.pointer
  cursor pointer
.drag
  cursor move
  user-select none
.width-100
  width 100%
.width-40
  width 40%
.width-60
  width 60%
.spin-90
  transform rotate(90deg)