Was ist die richtige Syntax für .less variable Interpolation?

Question

Ich habe einen .Weniger Sheet mit dem folgende Konstrukt bekommt:

@width:600; 

.some-style 
{ 
    width:@{width}px; 
} 

und das gibt die folgenden Fehler:

Expected '}' on line x in file '..\styles.less' 

ich die Zahnspange benötigen, weil ich die Variable von der unterscheiden muß folgende px Suffix (@widthpx funktioniert nicht, weil dann nach einer Variablen namens widthpx sucht). Und ich kann kein Leerzeichen verwenden, weil 600 px nicht gültig CSS ist. Das Verwenden von Klammern anstelle von geschweiften Klammern funktioniert ebenfalls nicht.

Was mache ich hier falsch?

aktualisieren: Ich installierte die neueste Version von .Weniger aus dem Package Manager, und jetzt funktioniert es ein wenig besser, aber mit einem fatalen Fehler:

width:@(width)px; <--note the parentheses 

kompiliert jetzt, sondern gibt diese CSS:

600 px <--note the space, which is invalid CSS, thus useless. 

Gelöst: Scotts mich auf die Lösung gerichtet. Zusätzlich zu seinen beiden Methoden sieht es so aus, als ob der Compiler eine Mathematik für eine Zeichenkette ausführen kann. So funktioniert das:

@width:600px; 

.some-style 
{ 
    width:@width/2; <--correctly emits "300px" 
} 

Answer 1

Also, wenn ich das richtig verstehen, wollen Sie den width einen Wert zu geben, aber ohne Einheiten, und die Anteile zum Zeitpunkt des Anrufs zuweisen. Ich bin nicht sicher warum Sie das tun wollen, aber es gibt zwei Möglichkeiten, die funktionieren würde:

ONE: machen die width eine Zeichenfolge und dann einen String Interpolation tun:

@width: '600'; 

.some-style 
{ 
    width: ~'@{width}px'; 
} 

ZWEI: multiplizieren mit 1px:

@width: 600; 

.some-style 
{ 
    width: @width * 1px; 
} 

Ich habe die obigen Antworten für einen Fall von "unitless" Zahlen und wie man die Einheit später hinzufügt (wie die Frage zuerst erschien). Wie auch immer, basierend auf Ihrem Kommentar lassen Sie mich erklären, warum @width: 600px funktioniert. WENIGER sieht das nicht als Zeichenfolge (wie Sie erwähnen Sie es anzeigen). Sie sieht es vielmehr als eine Zahl mit Einheiten. WENIGER 600px ist nicht die Zeichenkette (außer in Anführungszeichen), sondern die Nummer 600 in Einheiten von pixels. Deshalb kann es Operationen problemlos durchführen, ohne dass Sie sich darum kümmern müssen. Es kann dies tun, unabhängig davon, ob diese Einheiten em oder % oder eine andere gültige CSS-Einheit sind.