Le barre (`/`) nei valori CSS quando si utilizza Less (ad es.nella abbreviazione di "carattere")

StackOverflow https://stackoverflow.com/questions/3090340

  •  29-09-2019
  •  | 
  •  

Domanda

ho notato un problema durante l'utilizzo di Less con la scorciatoia dei caratteri

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

quanto sopra fallisce

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;

quando divido le proprietà funziona

.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;

}

penso che sia a causa della barra / che sta causando il problema, penso che dal momento che Less può fare calcoli, ad es. 2px + 5 = 7px sta cercando di fare una divisione?

È stato utile?

Soluzione

Ho appena riscontrato questo problema, la funzione di escape (almeno per less.js) è:e () come questo 

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

Altri suggerimenti

Il carattere in avanti barra / è la causa del compilatore MENO di dividere il vostro font-size dalla vostra line-height. È possibile:

  1. Separare i CSS in non-stenografia, regole separate

    font-size: @size; line-height: @height;

  2. Escape alcuni o tutti la regola di carattere stenografia MENO. Il / barra stessa è la parte migliore di fuggire. È possibile utilizzare la posta, la sintassi e("/") fuga, o il più recente, meglio documentate ~"/" tilde-preventivo. È inoltre possibile utilizzare la sintassi della stringa di interpolazione @{} MENO per inserire le variabili.

Prova questo: 

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

O questo: 

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

MENO 1.4 e sopra hanno ora un'opzione "strictMath" che risolve l'ambiguità tra e stenografia font. In 1.4 è disabilitato per impostazione predefinita per rendere la transizione più facile, ma nelle versioni successive sarà abilitato di default.

Si vedano le 1.4 note qui

Quando strictMath è attivata, tutte le operazioni matematiche devono essere confezionate in parentesi (10px / 5px) e la barra nel breve carattere non sarà interpretato come divisione.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top