Stylus mixins and extends

_utils.styl

$width-xxs = 600px
$width-xs = 728px
$width-s = 970px
$width-m = 1024px
$width-l = 1200px

bp(width)
  @media (max-width: width) 
    {block}

$clearfix
  &:after 
    content ""
    display table
    clear both
    
absoluteCenter()
  transform translate(-50%, -50%)
  left 50%
  top 50%
  position absolute
  
absoluteCenterReset()
  transform none
  position static
  
/* Grid Mixin */
  

grid($columns, $gutter)
  $width = 100% / $columns
  $marginDeficit =  $gutter * ($columns - 1) / $columns
  float left
  width "calc(%s - %s)" % ($width $marginDeficit)
  margin-right $gutter

  &:nth-child({$columns}n)
    margin-right 0
/* :before Overlay. Declare before and add this in*/

beforeOverlay($color, $opacity)
  &:before
    background $color
    opacity $opacity
    content ""
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    
container-no-pad()
  max-width 1200px
  padding 0
  margin 0 auto 0
  
container()
  max-width 1200px
  padding 0 20px 0
  margin 0 auto 0