ukośniki (`/`) w wartościach CSS przy użyciu mniej (np `font` skrót)

Question

zauważyłem problem przy użyciu mniejszej i stenografii czcionki

.font(@weight: 300, @size: 22px, @height: 32px) { 
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 
} 

powyższe zawiedzie z

this.a.toCSS is not a function 
http://localhost/tumblr/modern1/css/style.less on line 1, column 0: 
1. @highlight: #cb1e16; 
2. @shade1: #cb1e16; 

kiedy podzielone właściwości up to działa

.font(@weight: 300, @size: 22px, @height: 32px) { 
    font-weight: @weight; 
    font-size: @size; 
    line-height: @height; 
    font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

}

Myślę, że to ze względu na slash/thats powodujące problem, myślę, że od Less można wykonywać obliczenia, np. 2px + 5 = 7px jego próby podziału?

Answer 1

Właśnie wpadł na ten problem, funkcja escape (dla less.js tak) to: e() Ci się to

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

Answer 2

forward slash / charakter powoduje słabiej kompilator podzielić czcionki -size według twojej wysokości linii. Można:

1. oddzielić CSS do nieprzestrzegania skrót odrębne przepisy

   font-size: @size; wysokość linii: @ wysokość;

2. Uciec niektórym lub wszystkim z zasadą skracania czcionki LESS. Sam ukośnik jest najlepszą częścią do ucieczki. Możesz użyć składni ewakuacji e, e("/") lub nowszej, lepiej udokumentowanej wyceny tyldy ~"/". Można również użyć składni LESS string interpolation @{} do wstawienia zmiennych.

Spróbuj tego:

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

albo to:

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 

Answer 3

MNIEJ 1,4 i powyżej mają teraz opcję "strictMath", który rozwiązuje dwuznaczność pomiędzy skrótowej i czcionki. W wersji 1.4 jest domyślnie wyłączony, aby ułatwić przenoszenie, ale w nowszych wersjach będzie on domyślnie włączony.

Zobacz 1.4 notes here

Kiedy strictMath jest włączona, wszystkie operacje matematyczne muszą być opakowane w nawiasie (10px/5px) i ukośnik w krótkim czcionki nie będą interpretowane jako podziału.