Guide Generator for Pug(Jade)

_guidegenerator.pug

    //- ---------------------------------------------------------------
    //- grid generator mixin
    //- ---------------------------------------------------------------
    mixin pugError(message)
      script.
        console.error("grid generator mixin : #{message}");
    mixin createGuideStyle(option)
      if option.device === 'pc'
        -var media = '@media screen and (min-width: ' + option.breakpoint + 'px)'
      else if option.device === 'sp'
        -var media = '@media screen and (max-width: ' + (option.breakpoint - 1) + 'px)'
      else
        -var media = '@media screen and (min-width: 0)'
      style.
        #{media}{
          .guidegenerator{
            width: 100%;
            max-width: #{option['max-width']}px;
            min-width: #{option['min-width']}px;
            margin: 0 auto;
            height: 100%;
            position: fixed;
            z-index: 99999;
            left: 0;
            right: 0;
          }
          .guidegenerator_guide{
            pointer-events: none;
            background: cyan;
            position: absolute;
            display: block;
            z-index: 99999;
          }
          .guidegenerator_guide_vert{
            height: 1px;
            width: 100%;
          }
          .guidegenerator_guide_horiz{
            width: 1px;
            height: 100%;
          }
        }
    //- module function ---------------------------------------------------------------
    mixin createGuide(option, position)
      -var _style = {}
      -
        _style['margin-left'] = position.left + '%'
      div.guidegenerator_guide.guidegenerator_guide_horiz(style=_style)
    
    //- main function ---------------------------------------------------------------
    mixin guideGenerator(option)
        
      //- calc
      -var gutterLength = option.grid - 1;
      -var allGutterWidth = gutterLength * option.gutter
      -var allGridWidth = option['max-width'] - allGutterWidth
      -var gridWith = allGridWidth / option.grid;
      -var gridRate = gridWith  / option['max-width'];
      -var gutterRate = option.gutter  / option['max-width'];
      
      //- error
      if option.grid < 2
        +pugError('grid size should be larger than 2.')
      if allGutterWidth > option['max-width']
        +pugError('too many grids / gutters.')

      +createGuideStyle(option)
      aside.guidegenerator
        - for (i = 0; i < option.grid; i++)
          //- grid border left
          +createGuide(option, {
            left: ((gridRate * i) + (gutterRate * i)) * 100
          })
          //- grid border right
          +createGuide(option, {
            left: ((gridRate * i) + (gutterRate * i) + (gridRate)) * 100
          })
    
    
    
    //- usage
    //- +guideGenerator({
    //-   grid: 12,
    //-   gutter: 40,
    //-   'max-width': 1200,
    //-   'min-width': 1024,
    //-   device: 'pc',
    //-   breakpoint: 756,
    //- })