search

less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17.01k stars 3.41k forks source link

Cannot use variables with background-image: url(); and less.js #849

Closed OlivierDupre closed 12 years ago

OlivierDupre commented 12 years ago

Hi,

I'm facing an issue with the dynamic compiler for less. When I'm compiling staticallyl with Rhino my less file, it's "translated" properly and evertyhing is fine and working as expected.

However, when I'm trying to dynamically compile the same file with less.js, I have a problem with the following statement : background-image: url(@bgImg);

If I'm using the variable value instead of @bgImg, it's working as expected. Seems that the variable resolution is not done for "url".

Here is the original snippet of my code (problem is on the h-picture class): @import "variables.less";

// L'URL de l'image de fond @bgImg:"../../img/header-image-verte.jpg";

// Tailles de la marianne @marianneWidth: 114px; @marianneHeight: 146px;

/**

/**

Here is the complete stacktrace, displayed on top of my screen: b.value is undefined

in orion-header.less ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a;if (b.charAt(f) !== "u" || !t(/^url(/)) {return;}return a = t(this.entities.quoted) || t(this.entities.variable) || t(this.entities.dataURI) || t(/^[-\w%@$\/.&=:;#+?~]+/) || "", u(")"), new e.URL(a.value || a.data || a instanceof e.Variable ? a : new e.Anonymous(a), p.paths);}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {return t(this.entities.literal) || t(this.entities.variable) || t(this.entities.url) || t(this.entities.call) || t(this.entities.keyword) || t(this.entities.javascript) || t(this.comment);}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a, b, c = [], d;while ((a = t(this.addition) || t(this.entity))) {c.push(a);}if (c.length > 0) {return new e.Expression(c);}}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a, b = [], c;while ((a = t(this.expression))) {b.push(a);if (!t(",")) {break;}}if (b.length > 0) {return new e.Value(b);}}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a, c, d = b.charAt(f), h, l;q();if (d === "." || d === "#" || d === "&") {return;}if ((a = t(this.variable) || t(this.property))) {a.charAt(0) != "@" && (l = /^([^@+\/'"`(;{}-]);/.exec(k[g])) ? (f += l[0].length - 1, c = new e.Anonymous(l[1])) : a === "font" ? (c = t(this.font)) : (c = t(this.value)), h = t(this.important);if (c && t(this.end)) {return new e.Rule(a, c, h, i);}j = f, r();}}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a, b = [];while ((a = t(this.mixin.definition) || t(this.rule) || t(this.ruleset) || t(this.mixin.call) || t(this.comment) || t(this.directive)) || t(/^[\s\n]+/)) {a && b.push(a);}return b;}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a;if (t("{") && (a = t(this.primary)) && t("}")) {return a;}}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var b = [], c, d, g;q();while ((c = t(this.selector))) {b.push(c), t(this.comment);if (!t(",")) {break;}t(this.comment);}if (b.length > 0 && (d = t(this.block))) {return new e.Ruleset(b, d, a.strictImports);}j = f, r();}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ()@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 t((function () {var a, b = [];while ((a = t(this.mixin.definition) || t(this.rule) || t(this.ruleset) || t(this.mixin.call) || t(this.comment) || t(this.directive)) || t(/^[\s\n]+/)) {a && b.push(a);}return b;}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ("// Variables.less\n// Variables to customize the look and feel of Bootstrap\n// -----------------------------------------------------\n\n// VARIABLES ORION \xC3\xA0 la fin...\n// -------------------------------------------------\n\n// GLOBAL VALUES\n// --------------------------------------------------\n\n\n// Grays\n// -------------------------\n@black: #000;\n@grayDarker: #222;\n@grayDark: #333;\n@gray: #555;\n@grayLight: #999;\n@grayLighter: #eee;\n@white: #fff;\n\n\n// Accent colors\n// -------------------------\n@blue: #049cdb;\n@blueDark: #0064cd;\n@green: #46a546;\n@red: #9d261d;\n@yellow: #ffc40d;\n@orange: #f89406;\n@pink: #c3325f;\n@purple: #7a43b6;\n\n\n// Scaffolding\n// -------------------------\n@bodyBackground: @white;\n@textColor: @grayDark;\n\n\n// Links\n// -------------------------\n@linkColor: @gray;\n@linkColorHover: darken(@linkColor, 15%);\n\n\n// Typography\n// -------------------------\n@sansFontFamily: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n@serifFontFamily: Georgia, \"Times New Roman\", Times, serif;\n@monoFontFamily: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n\n@baseFontSize: 13px;\n@baseFontFamily: @sansFontFamily;\n@baseLineHeight: 18px;\n@altFontFamily: @serifFontFamily;\n\n@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily\n@headingsFontWeight: bold; // instead of browser default, bold\n@headingsColor: inherit; // empty to use BS default, @textColor\n\n\n// Tables\n// -------------------------\n@tableBackground: transparent; // overall background-color\n@tableBackgroundAccent: #f9f9f9; // for striping\n@tableBackgroundHover: #f5f5f5; // for hover\n@tableBorder: #ddd; // table and cell border\n\n\n// Buttons\n// -------------------------\n@btnBackground: @white;\n@btnBackgroundHighlight: darken(@white, 10%);\n@btnBorder: #ccc;\n\n@btnPrimaryBackground: @linkColor;\n@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);\n\n@btnInfoBackground: #5bc0de;\n@btnInfoBackgroundHighlight: #2f96b4;\n\n@btnSuccessBackground: #62c462;\n@btnSuccessBackgroundHighlight: #51a351;\n\n@btnWarningBackground: lighten(@orange, 15%);\n@btnWarningBackgroundHighlight: @orange;\n\n@btnDangerBackground: #ee5f5b;\n@btnDangerBackgroundHighlight: #bd362f;\n\n@btnInverseBackground: @gray;\n@btnInverseBackgroundHighlight: @grayDarker;\n\n\n// Forms\n// -------------------------\n@inputBackground: @white;\n@inputBorder: #ccc;\n@inputBorderRadius: 3px;\n@inputDisabledBackground: @grayLighter;\n@formActionsBackground: #f5f5f5;\n\n// Dropdowns\n// -------------------------\n@dropdownBackground: @white;\n@dropdownBorder: rgba(0,0,0,.2);\n@dropdownLinkColor: @grayDark;\n@dropdownLinkColorHover: @white;\n@dropdownLinkBackgroundHover: @linkColor;\n@dropdownDividerTop: #e5e5e5;\n@dropdownDividerBottom: @white;\n\n\n\n// COMPONENT VARIABLES\n// --------------------------------------------------\n\n// Z-index master list\n// -------------------------\n// Used for a bird's eye view of components dependent on the z-axis\n// Try to avoid customizing these :)\n@zindexDropdown: 1000;\n@zindexPopover: 1010;\n@zindexTooltip: 1020;\n@zindexFixedNavbar: 1030;\n@zindexModalBackdrop: 1040;\n@zindexModal: 1050;\n\n\n// Input placeholder text color\n// -------------------------\n@placeholderText: @grayLight;\n\n\n// Hr border color\n// -------------------------\n@hrBorder: @grayLighter;\n\n\n// Navbar\n// -------------------------\n@navbarHeight: 40px;\n@navbarBackground: @grayLight;\n@navbarBackgroundHighlight: @gray;\n\n@navbarText: @white;\n@navbarLinkColor: @grayLight;\n@navbarLinkColorHover: @white;\n@navbarLinkColorActive: @navbarLinkColorHover;\n@navbarLinkBackgroundHover: transparent;\n@navbarLinkBackgroundActive: @navbarBackground;\n\n@navbarSearchBackground: lighten(@navbarBackground, 25%);\n@navbarSearchBackgroundFocus: @white;\n@navbarSearchBorder: darken(@navbarSearchBackground, 30%);\n@navbarSearchPlaceholderColor: #ccc;\n@navbarBrandColor: @navbarLinkColor;\n\n\n// Hero unit\n// -------------------------\n@heroUnitBackground: @grayLighter;\n@heroUnitHeadingColor: inherit;\n@heroUnitLeadColor: inherit;\n\n\n// Form states and alerts\n// -------------------------\n@warningText: #c09853;\n@warningBackground: #fcf8e3;\n@warningBorder: darken(spin(@warningBackground, -10), 3%);\n\n@errorText: #b94a48;\n@errorBackground: #f2dede;\n@errorBorder: darken(spin(@errorBackground, -10), 3%);\n\n@successText: #468847;\n@successBackground: #dff0d8;\n@successBorder: darken(spin(@successBackground, -10), 5%);\n\n@infoText: #3a87ad;\n@infoBackground: #d9edf7;\n@infoBorder: darken(spin(@infoBackground, -10), 7%);\n\n\n\n// GRID\n// --------------------------------------------------\n\n// Default 940px grid\n// -------------------------\n@gridColumns: 12;\n@gridColumnWidth: 60px;\n@gridGutterWidth: 20px;\n@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));\n\n// Fluid grid\n// -------------------------\n@fluidGridColumnWidth: 6.382978723%;\n@fluidGridGutterWidth: 2.127659574%;\n\n\n\n\n\n// -------------------------------------------------\n// VARIABLES ORION \n// -------------------------------------------------\n/\n * Jeu de variables sp\xC3\xA9cifiques pour Bootstrap - Orion.\n * @TODO \xC3\xA0 compiler avec CompileMojo dans la m\xC3\xA9thode \"processTheme\" ?\n */\n\n@defaultColor: #808080;\n@wizardNextStep: #F0EEE3;\n@wizardCompletedStep: #A3C1C9;\n@wizardActiveStep: #163038;\n@wizardHoverStep: #8F061E;\n@wizardBorderWidth: 12px;\n@wizardSpanColor: #CCC;\n@wizardLinkColor: #666;\n\n@iconContrastColor: @white;\n\n\n// L'URL de l'image de fond\n@bgImg:\"../../img/header-image-verte.jpg\";\n\n\n// Tailles de la marianne\n@marianneWidth: 114px;\n@marianneHeight: 146px;\n\n/*\n * L'image de la marianne.\n_/\n.h-marianne { \n background-position:left top;\n width: @marianneWidth;\n vertical-align: top;\n text-decoration: none; \n border-bottom: 0px; \n}\n.h-marianne a { \n text-decoration: none;\n}\n\n/__\n \ L'image de fond dans l'en-t\xC3\xAAte.\n_/\n.h-picture{\n background-color: #FFFFFF1;\n background-image: url(@bgImg);\n background-repeat: no-repeat;\n background-position:right top;\n padding-left: 0px;\n}\n.h-picture a { \n text-decoration: none;\n vertical-align: top;\n display: inline-block;\n}\n\n/\n * Utilis\xC3\xA9 pour identifier les \xC3\xA9l\xC3\xA9ments qui doivent \xC3\xAAtre cach\xC3\xA9s lors qu'on repli l'en-t\xC3\xAAte \n*/\n.h-hide{\n}\n\n/\n * D\xC3\xA9finit un fond transparent. \n_/\n.h-transparent{\n background: transparent;\n}\n\n/_\n * Repr\xC3\xA9sente les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qu'ils sont repli\xC3\xA9s.\n/\n.h-fold{\n line-height: 100%;\n}\n\n/\n * Repr\xC3\xA9sente les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qu'ils sont d\xC3\xA9pli\xC3\xA9s.\n*/\n.h-unfold{\n line-height: @marianneHeight;\n}\n\n/\n * D\xC3\xA9finit les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qui ne doivent pas dispara\xC3\xAEtre lors du repli.\n * - le titre de l'application,\n * - les racourcis.\n_/\n.h-ael{\n vertical-align: middle;\n}\n\n/_\n * D\xC3\xA9finit le titre de l'application.\n/\n.h-title{\n font-family: arial;\n font-size: 18pt ;\n color: black ;\n line-height: 100%;\n}\n\n/\n * Le menu horizontal.\n*/\n.h-navbar{\n margin-bottom: 0px;\n}\n\n/\n * Le fil d'Ariane.\n_/\n.h-breadcrumb{\n padding-top: 0px;\n padding-bottom: 0px;\n}\n\n/\n * Emplacement des liens de navigation des messages.\n/\n.h-message{\n line-height: 100%;\n vertical-align: bottom;\n}\n.h-message-indent{\n text-indent: 5px;\n}\n.h-message-alert{\n padding: 8px 14px;\n}\n.h-message-underline{\n border-bottom-style:dotted;\n border-width: 1px;\n}\n\n\n/\ Surcharge de Bootstrap ! @TODO : On garde comme \xC3\xA7a ? /\n.alert .close{\n right: 5px;\n}\n",(function (d, e) {if (d) {return u(d, i);}try {c(d, e, a, b, {local: !1, lastModified: g, remaining: f}), s(document.getElementById("less-error-message:" + o(i)));} catch (d) {u(d, i);}}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 ("// Variables.less\n// Variables to customize the look and feel of Bootstrap\n// -----------------------------------------------------\n\n// VARIABLES ORION \xC3\xA0 la fin...\n// -------------------------------------------------\n\n// GLOBAL VALUES\n// --------------------------------------------------\n\n\n// Grays\n// -------------------------\n@black: #000;\n@grayDarker: #222;\n@grayDark: #333;\n@gray: #555;\n@grayLight: #999;\n@grayLighter: #eee;\n@white: #fff;\n\n\n// Accent colors\n// -------------------------\n@blue: #049cdb;\n@blueDark: #0064cd;\n@green: #46a546;\n@red: #9d261d;\n@yellow: #ffc40d;\n@orange: #f89406;\n@pink: #c3325f;\n@purple: #7a43b6;\n\n\n// Scaffolding\n// -------------------------\n@bodyBackground: @white;\n@textColor: @grayDark;\n\n\n// Links\n// -------------------------\n@linkColor: @gray;\n@linkColorHover: darken(@linkColor, 15%);\n\n\n// Typography\n// -------------------------\n@sansFontFamily: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n@serifFontFamily: Georgia, \"Times New Roman\", Times, serif;\n@monoFontFamily: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n\n@baseFontSize: 13px;\n@baseFontFamily: @sansFontFamily;\n@baseLineHeight: 18px;\n@altFontFamily: @serifFontFamily;\n\n@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily\n@headingsFontWeight: bold; // instead of browser default, bold\n@headingsColor: inherit; // empty to use BS default, @textColor\n\n\n// Tables\n// -------------------------\n@tableBackground: transparent; // overall background-color\n@tableBackgroundAccent: #f9f9f9; // for striping\n@tableBackgroundHover: #f5f5f5; // for hover\n@tableBorder: #ddd; // table and cell border\n\n\n// Buttons\n// -------------------------\n@btnBackground: @white;\n@btnBackgroundHighlight: darken(@white, 10%);\n@btnBorder: #ccc;\n\n@btnPrimaryBackground: @linkColor;\n@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);\n\n@btnInfoBackground: #5bc0de;\n@btnInfoBackgroundHighlight: #2f96b4;\n\n@btnSuccessBackground: #62c462;\n@btnSuccessBackgroundHighlight: #51a351;\n\n@btnWarningBackground: lighten(@orange, 15%);\n@btnWarningBackgroundHighlight: @orange;\n\n@btnDangerBackground: #ee5f5b;\n@btnDangerBackgroundHighlight: #bd362f;\n\n@btnInverseBackground: @gray;\n@btnInverseBackgroundHighlight: @grayDarker;\n\n\n// Forms\n// -------------------------\n@inputBackground: @white;\n@inputBorder: #ccc;\n@inputBorderRadius: 3px;\n@inputDisabledBackground: @grayLighter;\n@formActionsBackground: #f5f5f5;\n\n// Dropdowns\n// -------------------------\n@dropdownBackground: @white;\n@dropdownBorder: rgba(0,0,0,.2);\n@dropdownLinkColor: @grayDark;\n@dropdownLinkColorHover: @white;\n@dropdownLinkBackgroundHover: @linkColor;\n@dropdownDividerTop: #e5e5e5;\n@dropdownDividerBottom: @white;\n\n\n\n// COMPONENT VARIABLES\n// --------------------------------------------------\n\n// Z-index master list\n// -------------------------\n// Used for a bird's eye view of components dependent on the z-axis\n// Try to avoid customizing these :)\n@zindexDropdown: 1000;\n@zindexPopover: 1010;\n@zindexTooltip: 1020;\n@zindexFixedNavbar: 1030;\n@zindexModalBackdrop: 1040;\n@zindexModal: 1050;\n\n\n// Input placeholder text color\n// -------------------------\n@placeholderText: @grayLight;\n\n\n// Hr border color\n// -------------------------\n@hrBorder: @grayLighter;\n\n\n// Navbar\n// -------------------------\n@navbarHeight: 40px;\n@navbarBackground: @grayLight;\n@navbarBackgroundHighlight: @gray;\n\n@navbarText: @white;\n@navbarLinkColor: @grayLight;\n@navbarLinkColorHover: @white;\n@navbarLinkColorActive: @navbarLinkColorHover;\n@navbarLinkBackgroundHover: transparent;\n@navbarLinkBackgroundActive: @navbarBackground;\n\n@navbarSearchBackground: lighten(@navbarBackground, 25%);\n@navbarSearchBackgroundFocus: @white;\n@navbarSearchBorder: darken(@navbarSearchBackground, 30%);\n@navbarSearchPlaceholderColor: #ccc;\n@navbarBrandColor: @navbarLinkColor;\n\n\n// Hero unit\n// -------------------------\n@heroUnitBackground: @grayLighter;\n@heroUnitHeadingColor: inherit;\n@heroUnitLeadColor: inherit;\n\n\n// Form states and alerts\n// -------------------------\n@warningText: #c09853;\n@warningBackground: #fcf8e3;\n@warningBorder: darken(spin(@warningBackground, -10), 3%);\n\n@errorText: #b94a48;\n@errorBackground: #f2dede;\n@errorBorder: darken(spin(@errorBackground, -10), 3%);\n\n@successText: #468847;\n@successBackground: #dff0d8;\n@successBorder: darken(spin(@successBackground, -10), 5%);\n\n@infoText: #3a87ad;\n@infoBackground: #d9edf7;\n@infoBorder: darken(spin(@infoBackground, -10), 7%);\n\n\n\n// GRID\n// --------------------------------------------------\n\n// Default 940px grid\n// -------------------------\n@gridColumns: 12;\n@gridColumnWidth: 60px;\n@gridGutterWidth: 20px;\n@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));\n\n// Fluid grid\n// -------------------------\n@fluidGridColumnWidth: 6.382978723%;\n@fluidGridGutterWidth: 2.127659574%;\n\n\n\n\n\n// -------------------------------------------------\n// VARIABLES ORION \n// -------------------------------------------------\n/\n * Jeu de variables sp\xC3\xA9cifiques pour Bootstrap - Orion.\n * @TODO \xC3\xA0 compiler avec CompileMojo dans la m\xC3\xA9thode \"processTheme\" ?\n /\n\n@defaultColor: #808080;\n@wizardNextStep: #F0EEE3;\n@wizardCompletedStep: #A3C1C9;\n@wizardActiveStep: #163038;\n@wizardHoverStep: #8F061E;\n@wizardBorderWidth: 12px;\n@wizardSpanColor: #CCC;\n@wizardLinkColor: #666;\n\n@iconContrastColor: @white;\n\n\n// L'URL de l'image de fond\n@bgImg:\"../../img/header-image-verte.jpg\";\n\n\n// Tailles de la marianne\n@marianneWidth: 114px;\n@marianneHeight: 146px;\n\n/__\n \ L'image de la marianne.\n_/\n.h-marianne { \n background-position:left top;\n width: @marianneWidth;\n vertical-align: top;\n text-decoration: none; \n border-bottom: 0px; \n}\n.h-marianne a { \n text-decoration: none;\n}\n\n/\n * L'image de fond dans l'en-t\xC3\xAAte.\n*/\n.h-picture{\n background-color: #FFFFFF1;\n background-image: url(@bgImg);\n background-repeat: no-repeat;\n background-position:right top;\n padding-left: 0px;\n}\n.h-picture a { \n text-decoration: none;\n vertical-align: top;\n display: inline-block;\n}\n\n/\n * Utilis\xC3\xA9 pour identifier les \xC3\xA9l\xC3\xA9ments qui doivent \xC3\xAAtre cach\xC3\xA9s lors qu'on repli l'en-t\xC3\xAAte \n_/\n.h-hide{\n}\n\n/_\n * D\xC3\xA9finit un fond transparent. \n/\n.h-transparent{\n background: transparent;\n}\n\n/\n * Repr\xC3\xA9sente les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qu'ils sont repli\xC3\xA9s.\n*/\n.h-fold{\n line-height: 100%;\n}\n\n/\n * Repr\xC3\xA9sente les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qu'ils sont d\xC3\xA9pli\xC3\xA9s.\n_/\n.h-unfold{\n line-height: @marianneHeight;\n}\n\n/_\n * D\xC3\xA9finit les \xC3\xA9l\xC3\xA9ments de l'en-t\xC3\xAAte une fois qui ne doivent pas dispara\xC3\xAEtre lors du repli.\n * - le titre de l'application,\n * - les racourcis.\n/\n.h-ael{\n vertical-align: middle;\n}\n\n/\n * D\xC3\xA9finit le titre de l'application.\n*/\n.h-title{\n font-family: arial;\n font-size: 18pt ;\n color: black ;\n line-height: 100%;\n}\n\n/\n * Le menu horizontal.\n_/\n.h-navbar{\n margin-bottom: 0px;\n}\n\n/_\n * Le fil d'Ariane.\n/\n.h-breadcrumb{\n padding-top: 0px;\n padding-bottom: 0px;\n}\n\n/\n * Emplacement des liens de navigation des messages.\n*/\n.h-message{\n line-height: 100%;\n vertical-align: bottom;\n}\n.h-message-indent{\n text-indent: 5px;\n}\n.h-message-alert{\n padding: 8px 14px;\n}\n.h-message-underline{\n border-bottom-style:dotted;\n border-width: 1px;\n}\n\n\n/* Surcharge de Bootstrap ! @TODO : On garde comme \xC3\xA7a ? /\n.alert .close{\n right: 5px;\n}\n",null)@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 i([object XMLHttpRequest],(function (a, g) {if (!e && l && g && (new Date(g)).valueOf() === (new Date(l.timestamp)).valueOf()) {p(l.css, b), c(null, null, a, b, {local: !0, remaining: f});} else {try {(new d.Parser({optimization: d.optimization, paths: [i.replace(/[\w.-]+$/, "")], mime: b.type, filename: m})).parse(a, function (d, e) {if (d) {return u(d, i);}try {c(d, e, a, b, {local: !1, lastModified: g, remaining: f}), s(document.getElementById("less-error-message:" + o(i)));} catch (d) {u(d, i);}});} catch (h) {u(h, i);}}}),(function (a, b) {throw new Error("Couldn't load " + b + " (" + a + ")");}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 q("http://localhost:8080/boots4jsf-web/theme/less/orion-header.less?theme=gray&library=","text/css",(function (a, g) {if (!e && l && g && (new Date(g)).valueOf() === (new Date(l.timestamp)).valueOf()) {p(l.css, b), c(null, null, a, b, {local: !0, remaining: f});} else {try {(new d.Parser({optimization: d.optimization, paths: [i.replace(/[\w.-]+$/, "")], mime: b.type, filename: m})).parse(a, function (d, e) {if (d) {return u(d, i);}try {c(d, e, a, b, {local: !1, lastModified: g, remaining: f}), s(document.getElementById("less-error-message:" + o(i)));} catch (d) {u(d, i);}});} catch (h) {u(h, i);}}}),(function (a, b) {throw new Error("Couldn't load " + b + " (" + a + ")");}))@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 n([object HTMLLinkElement],(function (a, d, e, f, g) {g.local ? t("loading " + f.href + " from cache.") : (t("parsed " + f.href + " successfully."), p(d.toCSS(), f, g.lastModified)), t("css for " + f.href + " generated in " + (new Date - c) + "ms"), g.remaining === 0 && t("css generated in " + (new Date - b) + "ms"), c = new Date;}),true,2)@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 m((function (a, d, e, f, g) {g.local ? t("loading " + f.href + " from cache.") : (t("parsed " + f.href + " successfully."), p(d.toCSS(), f, g.lastModified)), t("css for " + f.href + " generated in " + (new Date - c) + "ms"), g.remaining === 0 && t("css generated in " + (new Date - b) + "ms"), c = new Date;}),true)@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:8 (true)@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:9 ([object Proxy])@http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:9 @http://localhost:8080/boots4jsf-web/javax.faces.resource/less-1.3.0.min.js.xhtml?ln=js:9

MokoJumbie commented 12 years ago

Have you tried:

url("@{bgImg}");

OlivierDupre commented 12 years ago

Yes I did, right now! ... and it works! I didn't even think about that. Thank you very much for your answer. That one is good to know.

Cheers, Olivier.

matthew-dean commented 11 years ago

On Lesscss.org, it suggests that this syntax is supported (but does not work):

background-image: url(@{sprite});

This should be clarified that it does not work outside of using quotes, inside of a background declaration.