Jaka jest prawidłowa składnia interpolacji zmiennej .less?

Question

Mam stylów .less z następującymi konstruktem:

@width:600; 

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

a to daje następujący błąd:

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

muszę te szelki, bo trzeba odróżnić zmienną z po sufiksie px nie działa, ponieważ wtedy szuka zmiennej o nazwie widthpx). I nie mogę użyć spacji, ponieważ 600 px nie jest prawidłowym css. Używanie nawiasów zamiast nawiasów klamrowych również nie działa.

Co ja tu robię źle?

Aktualizacja: Zainstalowałem najnowszą wersję .less z Package Manager, a teraz to działa trochę lepiej, ale z fatalnym wadę:

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

kompiluje teraz, ale emituje ten CSS:

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

rozwiązać: Scotts wskazał mi do roztworu. Oprócz swoich dwóch metod wygląda na to, że kompilator może wykonywać matematykę na łańcuchu. Tak to działa:

@width:600px; 

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

Answer 1

Więc jeśli dobrze rozumiem, chcesz dać width wartość, ale bez żadnej jednostki i przypisać jednostki w czasie rozmowy. Nie jestem pewien dlaczego, co chcesz zrobić, ale istnieją dwa sposoby, które działają:

ONE: sprawić width ciąg i następnie zrobić interpolacji wyrażenie:

@width: '600'; 

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

DWA: pomnożyć przez 1px:

@width: 600; 

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

Pozostawiłem powyższe odpowiedzi w miejscu dla przypadku liczb "bez jednostek" i jak dodać jednostkę później (ponieważ pytanie pojawiało się na początku). Jednak na podstawie Twojego komentarza pozwól mi wyjaśnić, dlaczego działa @width: 600px. LESS nie widzi tego jako string (jak wspomniałeś, że go przeglądasz). Przeciwnie, widzi to jako liczbę z jednostkami. MNIEJ 600px nie jest ciągiem znaków (chyba że jest zawijany w cudzysłowy), ale numerem 600 w jednostkach pixels. Dlatego może wykonywać na nim operacje bez konieczności martwienia się o to. Może to zrobić bez względu na to, czy te jednostki to em lub %, czy jakakolwiek inna poprawna jednostka CSS.