report.pug's line 72 are wrong?

[gkfnf]

os: win10
editor: vscode
terminal:gitbash on vscode's terminal

I have no any experience of pug/jade or css/scss. So I decide to type the example code
one by one to learn how to use this.

So, there are two pug errors tortured me.
one is "Invalid indentation, you can use tabs or spaces but not both"
So i retype the code. relaxed the pug file. but it didn't work. And i del it. retype again. it didn't work again. So i guessed that it may be the vim-plugin led to this. and i uninstall it.
reload the vscode. It didn't work. But after change the vscode's theme.
I've got the right way. but occurs another error.

.caption
This also demostrates figure composition into panels -suck it, markdown!
#[b A. ] Graph defined as a JSON and transformed to SVG using ........

the error is: "[b" is not a valid ID.

So i don't understand this time cause i've never wirting any pug before.
So, what's wrong with this code?

And i also get some syntax error remind of file 'report.scss'

@for $i from 1 to 20 {
.width-#{$i}cm { width: #{10*$i}mm; }
}
@for $i from 1 to 20 {
.top-#{$i}mm { margin-top: #{$i}mm; }
}

Does this caused the problem?

[Zulko]

I believe your problem is that you forgot the dot at the end of .caption. on line 70. It is very important as it tells pug that the next lines are actually a same block.

[gkfnf]

After add the '.'
And i meet this problem:
Processing \ssti.pug...
ENOENT: no such file or directory, open 'C:\Users\Fkbug\OneDrive\MyProfile\Temp_Note\PDF\SSTI\diagrams\plot.svg'
at C:\Users\Fkbug\OneDrive\MyProfile\Temp_Note\PDF\SSTI\ssti.pug line 83
There was a Pug error (see above)
... Done in 0.02s

So I check the code, find that i add a '.' in \plot.vegalite.json on variable of values's end.
So I delete the '.' and diff the code with example, keep the same as the example.
And I got this:

Processing \diagrams\plot.vegalite.json...
Page error: Error: TypeError: Cannot read property 'values' of undefined
at Object.n.isInlineData (https://cdn.jsdelivr.net/npm/[email protected]:1:202281)
at t.hash (https://cdn.jsdelivr.net/npm/[email protected]:1:85368)
at https://cdn.jsdelivr.net/npm/[email protected]:1:81360
at Object.n.parseData (https://cdn.jsdelivr.net/npm/[email protected]:1:81501)
at t.parseData (https://cdn.jsdelivr.net/npm/[email protected]:1:190895)
at t.e.parse (https://cdn.jsdelivr.net/npm/[email protected]:1:134584)
at Object.n.compile (https://cdn.jsdelivr.net/npm/[email protected]:1:48180)
at Object.vega-lite (https://cdn.jsdelivr.net/npm/[email protected]:1:15263)
at e (https://cdn.jsdelivr.net/npm/[email protected]:1:16035)
at about:blank:1:253

So I guess this may be caused by the vscodevim, so i disable the plugin, reload the editor.
And retype the /plot.vegalite.json file again.
And the error again:
at C:\Users\Fkbug\OneDrive\MyProfile\Temp_Note\PDF\SSTI\ssti.pug line 83 again.
That means ReLaXedJS didn't generate the svg file.
So i guess it may be caused by that the base of ReLaXedJS just listen the file's change, So after i typed
the svg file and Ctrl+S, it may can't recognize the change sometimes. So i edit the json file. and save it again, Thank god, it generate the svg file finally.
But, I got the error again:
at C:\Users\Fkbug\OneDrive\MyProfile\Temp_Note\PDF\SSTI\ssti.pug line 83 again.
So I guess it may be caused by the way of listen-file-change's-and-regenerate .
So i interrupt the process, and pretend to edit the .pug file. and regenrate it.
Duang.......
I got another problem:
property "mm" must be followed by a ':'

I have no clue of this means? what property is "mm" ? And why it must be followed by a ":" ?

[gkfnf]

I've learn a little about css and scss, So i fixed the problem.
That mm is the property of html tag defined in scss. And the problem of space and tab caused the error.
So after i set the intent using space and retype again the mm property scss, the problem fixed.

But i meet another problem.
That the plot.svg doesn't generate on right way.

The info is below:
Processing \diagrams\plot.svg...
... HTML generated in 0.1s
... Document loaded in 0.2s
... Network idled in 0.2s
... PDF written in 0.8s (244.02 KB)
... Done in 1.27s

Processing \diagrams\plot.svg...
... HTML generated in 0.1s
... Document loaded in 0.2s
File \diagrams\plot.vegalite.json: ignoring trigger, too busy.
... Network idled in 0.2s
... PDF written in 0.7s (244.02 KB)
... Done in 1.17s

And i think this may be caused by the thread interrupt.
while my plot.svg didn't generate completely, and this time the ReLaxedJs start to tranform the .pug file.
So my plot.svg is completely some weird encodings. and it leads to the pdf's figure is some weired encodings.

So, how to fix this?