. Değişken enterpolasyon için doğru sözdizimi nedir?

Question

Ben şu yapı bulunan .less stil var:

@width:600; 

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

ve bu aşağıdaki hatayı veriyor: Ben den değişkeni ayırt etmek gerekir, çünkü

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

O parantez gerek Aşağıdaki px sonekini (@widthpx çalışmaz, çünkü widthpx adlı bir değişken arar). Ve boşluk kullanamıyorum çünkü 600 px geçerli değil css. Kıvrık parantez yerine parantez kullanmak da işe yaramıyor.

Burada yanlış olan ne yapıyorum?

Güncelleme: Ben Paket Yöneticisi gelen .less son sürümünün yüklü ve şimdi biraz daha iyi çalışır, ancak ölümcül kusur ile:

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

şimdi derler, ancak bu CSS yayar:

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

çözüldü: scotts çözümü beni işaret etti. İki yöntemine ek olarak, derleyicinin dizede matematik yapabildiği görülüyor.

@width:600px; 

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

Answer 1

Yani eğer doğru anlamak, sen width bir değer ancak herhangi birimler olmadan vermek ve çağrı sırasında birimlerini atamak istiyorum: Yani bu çalışır. Ben neden bunu yapmak isteyeyim emin değilim, ama orada çalışacak iki yolu vardır:

BİR: width bir dize yapmak ve daha sonra bir dize interpolasyon yapın:

@width: '600'; 

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

İKİ: çarpın 1px tarafından:

@width: 600; 

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

Yukarıdaki cevapları "ünitesiz" bir sayı için ve üniteyi daha sonra nasıl ekleyeceğimi (ilk başta olduğu gibi) için bıraktım. Ancak, yorumunuza dayanarak, neden @width: 600px'un çalıştığını açıklamama izin verin. LESS bunu dizgisi olarak görmüyor (onu gördüğünüz gibi). Daha ziyade, birimleri bir sayı olarak görür. LESS 600px, karakter dizisi değil (tırnak içine alınmadığı sürece), 600 sayısı pixels birimidir. Bu yüzden, bunun üzerinde endişelenmenize gerek kalmadan, üzerinde gayet iyi işler yapabilir. Bu birimlerin em veya % ya da diğer geçerli CSS birimleri olup olmadığını yapabilirsiniz.