Verwirrt durch LESS replace() -Funktion Verhalten

Question

Ich versuche, eine LESS Mixin schreiben, die Teil einer Zeichenfolge verwendet, um einen Klassennamen zu bilden. Ich erwartete, in der Lage zu sein, replace() zu verwenden, um einen Wert für eine Variable zur Verfügung zu stellen, und dann die Variable in der Regel zu verwenden. Hier ist der Test, den ich schrieb, um zu überprüfen, dass es funktionieren würde:

.foo(@xyz) { 
    @pfx: replace(@xyz, "(.).*", "$1"); 

    .@{pfx}-foo { margin: 0; } 
} 

.foo(abcdefghijklmnop); 

Wenn ich laufe, dass durch lessc (1.7.4) (bearbeiten - auch 2.1.0), es Art-of Werke, Erzeugen dies: So

.aaa-foo { 
    margin: 0; 
} 

, die replace() zupft richtig das erste Zeichen ("a") von der Saite, die ich in geben, aber statt

.a-foo 

es gibt mir

.aaa-foo 

Ich habe für die replace() Funktion an der Quelle sah und es ist schmutz einfach, so dass ich bin nur völlig verwirrt über das, was vor sich geht. (Ich habe die Regex als "^(.).*$" mit dem gleichen Ergebnis ausprobiert.)

ich den Test erweiterte ein wenig:

.foo(@xyz) { 
    @pfx: replace(@xyz, "(.).*", "$1"); 

    .@{pfx}-foo { margin: 0; content: "@{pfx}"; } 
} 

.foo(abcdefghijklmnop); 

, die mir gibt:

.aaa-foo { 
    margin: 0; 
    content: "a"; 
} 

was bedeutet, dass der Regex ist funktioniert gut.

Answer 1

versuchen, diese

.foo(@xyz) { 
    @props: ~`"@{arguments}"`; 

    @pfx: replace(@props, "^(.).*$", "$1"); 

    .@{pfx}-foo { margin: 0; } 
} 

.foo(abcdefghijklmnop); 

EDIT

auch den Kommentar zu beantworten, möchten Sie eine Zeichenfolge übergeben zu ersetzen, tatsächlich eine einfachere Version zu verwenden, wäre .foo(~"abcdefghijklmnop"), die weniger zwingt den Parameter zu berücksichtigen als String ohne Ausgabe der Anführungszeichen.

Answer 2

Try this:

@pfx: e(replace(@xyz, "^(.).*$", "$1")); 

Oder diese:

@pfx: replace(~"@{xyz}", "^(.).*$", "$1"); 

Siehe Dokumentation für die e Funktion.

Answer 3

Anscheinend sind ein paar Workarounds vorgesehen, aber wie es funktioniert, ist immer noch ein Mythos.

Der AST nach der Auswertung war völlig richtig, die wie folgt aussieht:

Element { combinator: { value: '', emptyOrWhitespace: true }, 
    value: '.', 
    index: 54, 
    currentFileInfo: 
    { filename: 'input', 
    relativeUrls: undefined, 
    rootpath: '', 
    currentDirectory: '', 
    entryPath: '', 
    rootFilename: 'input' } }, 
Element { combinator: { value: '', emptyOrWhitespace: true }, 
    value: 
    Quoted { escaped: undefined, 
    value: 'a', 
    quote: 'a', 
    index: undefined, 
    currentFileInfo: undefined }, 
    index: 55, 
    currentFileInfo: 
    { filename: 'input', 
    relativeUrls: undefined, 
    rootpath: '', 
    currentDirectory: '', 
    entryPath: '', 
    rootFilename: 'input' } }, 
Element { combinator: { value: '', emptyOrWhitespace: true }, 
    value: '-foo', 
    index: 61, 
    currentFileInfo: 
    { filename: 'input', 
    relativeUrls: undefined, 
    rootpath: '', 
    currentDirectory: '', 
    entryPath: '', 
    rootFilename: 'input' } } 

Aber wenn der CSS-Code zu erzeugen, die Dinge Süden schnell gehen.

Quoted.prototype.genCSS = function (context, output) { 
    if (!this.escaped) { 
     output.add(this.quote, this.currentFileInfo, this.index); 
    } 
    output.add(this.value); 
    if (!this.escaped) { 
     output.add(this.quote); 
    } 
}; 

Quoted Knoten ausgegeben wird der Wert mit Zitat um ihn herum, wenn es nicht entgangen ist. Während das Zitat das erste Zeichen des Wertes ist, sagen wir 'a' in diesem Fall.

Und wenn e() um replace gilt, weniger wird Anonymous Knoten im AST statt Quoted Knoten gesetzt, so wird kein Zitat ausgegeben werden.