How to correctly output variables in Jade templating engine?

Question

I was using links like a(href="#{settings.url}") but someone told me that i could just do a(href=settings.url), which is a better solution (although I do not understand the difference).

But now i have a question for another use case. Which one should i use, If any? And Why?

1. link(rel="stylesheet", href="#{settings.url}/assets/css/main.css")

2. link(rel="stylesheet", href=settings.url + "/assets/css/main.css")

Answer 1

I would say there is not a very important difference, but let's take a look behind the scenes:

First example:

link(rel="stylesheet", href="#{locals.url}/assets/css/main.css")

with data

{ url: 'www.example.com' }

produces this code

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    buf.push('<link rel="stylesheet"' + jade.attr("href", "" + locals.url + "/assets/css/main.css", true, false) + "/>");
    return buf.join("");
}

and this HTML

<link rel="stylesheet" href="www.example.com/assets/css/main.css"/>

Secondly:

link(rel="stylesheet", href=locals.url + "/assets/css/main.css")

will (with the same data as above) produce

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    buf.push('<link rel="stylesheet"' + jade.attr("href", locals.url + "/assets/css/main.css", true, false) + "/>");
    return buf.join("");
}

and result in HTML (surprise!):

<link rel="stylesheet" href="www.example.com/assets/css/main.css"/>

Lesson learned:
You see the difference in both "methods" is marginal (see the "" + in the frist example). Ergo use whatever pleases you best.