Pug code block is throwing Unexpected token error

Question

I have the following mixin:

mixin color(c, color)
    if (c == 0)
        div(class=`${color}-50`) red-50
    else if (c == 5)
        div(class=`${color}`) red
    else
        div(class=`${color}-${c*100}`) red-#{c*100}

I then use the following code to use the mixin:

block content
    .grid
        -
            var colors = ['red', 'pink', 'purple']
            each color in colors
                .cell.cell-6
                    for (let i = 0; i < 10; i++)
                        +color(i, color)

When I do this, I get the following error:

SyntaxError: Unexpected token (186:5)
    at Parser.pp$4.raise (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:2488:13)
    at Parser.pp.unexpected (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:623:8)
    at Parser.pp.semicolon (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:600:59)
    at Parser.pp$1.parseExpressionStatement (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:1025:8)
    at Parser.pp$1.parseStatement (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:780:22)
    at Parser.pp$1.parseTopLevel (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:672:23)
    at Parser.parse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:529:15)
    at Object.parse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:3378:37)
    at reallyParse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\index.js:22:16)
    at findGlobals (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\index.js:35:11)

The issue is in the - code block. Am I doing some sort of formatting wrong? How can I do block code?

Answer 1

It's not easy to mix pug with JS, there are 2 problems here:

• "-" should be followed by JS expession is the same line (as far as I know)
• there are no "for" in PUG itself (i think)

So, the working code should be written as follows:

codepen

mixin color(c, color)
    if (c == 0)
        div(class=`${color}-50`) red-50
    else if (c == 5)
        div(class=`${color}`) red
    else
        div(class=`${color}-${c*100}`) red-#{c*100}

block content
    .grid
        - var colors = ['red', 'pink', 'purple']
            each color in colors
                .cell.cell-6
                    - var i = 0;
                    while i < 10
                        +color(i, color)
                        - i++