Pug代码块正在抛出意外的令牌错误。

Question

我有以下混音：

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
                    for (let i = 0; i < 10; i++)
                        +color(i, color)

当我这样做时，我会得到以下错误：

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)

问题在-代码块中。我是不是做错格式了？我怎么做块代码？

Answer 1

把pug和JS混在一起并不容易，这里有两个问题：

• "-“之后应该是JS退出，这是相同的(据我所知)。
• 在帕格里面没有"for“(我想)

因此，工作代码应按以下方式编写：

码页

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++