Come usare font-face con cssless?

Question

Ci sono stati un po 'di parlare di problemi con cssless e font-face già, per esempio qui: How we can use @font-face in Less

Ma questo problema sembra essere un altro, e mi chiedo se qualcuno ha trovato soluzione a questo? Penso che la mia sintassi di meno sia giusta.

Se scrivo il seguente:

.setFont (@fontName) { 
    @font-face { 
     font-family: '@{fontName}'; 
     src: url('../fonts/@{fontName}.eot'); 
     src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/@{fontName}.ttf') format('truetype'); 
    } 
} 
.setFont ('myfont1'); 
.setFont ('myfont2'); 
.setFont ('myfont3'); 

Sarà uscita seguente:

@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 

Si richiede solo la prima variabile. Mi chiedo se sia perché non sono chiamati all'interno di un elemento, anche se ho provato a chiamarlo all'interno di un elemento, con risultati identici.

Come si usa cssless con font-face?

Grazie.

Answer 1

Lo fa perché le variabili non sono tecnicamente variabili in MENO ma costanti e, pertanto, non possono essere ridefinite.

Quindi, quando si sta definendo @fontName la prima volta, non può essere ridefinito. È per questo che stai ottenendo duplicati. Sfortunatamente, non puoi usarli come parametri (come impostare border-radius (@radius), che sembra quello che speravi. È sfumato, ma c'è una differenza.

Il modo in cui lo stai usando è come variabile (costante), il modo in cui vorresti utilizzarlo, ma non è possibile, è come un mix parametrico, se è più facile pensarlo in termini di ambito. In questo caso stai impostando una variabile globale, a differenza di una variabile locale per quel particolare selettore, ad esempio, quando si imposta il raggio di confine, lo si imposta all'interno di un selettore, rendendolo quindi una variabile locale per quel selettore. Nell'esempio sopra non si applica .setFont a un selettore, dove può essere usato come variabile locale, ma impostandolo come globale

L'unico modo potresti essere in grado di farlo usando @arguments, ma potrebbe richiedere tanto codice quanto scrivere le singole istruzioni @ font-face. Poiché @ font-face è tecnicamente un selettore stesso, verrà sempre utilizzato in un modo che tratta le variabili utilizzate in riferimento ad esso come globali.