Question

我有以下mixin：

newdate

然后我使用以下代码来使用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}

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

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

将哈巴狗与JS混合并不容易，这里有两个问题：

“ - ”之后应该跟JS一样，就是我所知道的同一行（
PUG本身没有“for”（我认为）

因此，工作代码应写成如下：

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

Pug代码块抛出了意外的令牌错误

1 个答案: