Meno CSS, per favore spiegate Argomenti avanzati e la variabile @rest per me?

Question

Domanda semplice: non capisco cosa gli argomenti avanzati fanno in less CSS, come da http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable. Ho combattuto per capire come viene spiegato lì.

ho capito questo:

.mixin(@a: 1) { 

Ma io non capisco le seguenti due, dove il ... viene introdotto:

.mixin(...) {  // matches 0-N arguments 
.mixin() {   // matches exactly 0 arguments 
.mixin(@a: 1) {  // matches 0-1 arguments 
.mixin(@a: 1; ...) { // matches 0-N arguments 
.mixin(@a; ...) { // matches 1-N arguments 

.mixin (@a; @rest ...) {// @rest è legato agli argomenti dopo @a
// @arguments è associato a tutti gli argomenti}

Sto imparando meno perché sono molto appassionato di bootstrap, ma questo mi ha lasciato perplesso.

Grazie mille!

Answer 1

Bene, va bene anche leggere http://lesscss.org/features/#mixins-parametric-feature-pattern-matching.

In Less viene compilato solo il mixin che corrisponde al numero di argomenti del chiamante. Nota anche che quando due o più mixin corrispondono, tutti sono compilati in CSS.

Quando si mixin ottenuto un argomento, come quello indicato di seguito:

.mixin(@a) {} 

Solo chiamanti con partita un argomento e sarà compilato: .mixin(3); or .mixin(1) e così via. Ma NON .mixin() o .mixin(1,2,3)

Quando si imposta un valore predefinito per il primo argomento, per esempio 3, come illustrato di seguito:

.mixin(@a: 3) {} 

Ora non solo le chiamate con 1 partita argomento, ma chiede anche con zero argomenti :

.mixin(@a: 3) {property: @a;} 
p{ .mixin();} 

uscite:

p { 
    property: 3; 
} 

Ora dare un'occhiata all'argomento speciale ..., tale argomento corrisponde a qualsiasi numero di argomenti. Quindi .mixin(...) corrisponderà e verrà compilato i seguenti chiamanti .mixin(), .mixin(1) e .mixin(1,2,3,4).

Quando si antepone un nome (incluso il @) per l'argomento ... i valori verranno assegnati ad una variabile con quel nome:

.mixin(@listofvariables...) { 
p: @listofvariables; 
} 
p { 
.mixin(one; two; three); 
} 

uscite:

p { 
    p: one two three; 
} 

noti che ... assegna gli argomenti di una lista, che possono essere manipolati anche con lo list functions.

Un mixin come .mixin(@a; ...) è una variante dei due casi di utilizzo precedenti. Questo mixin richiede un primo set di argomenti, seguito da zero o da qualsiasi altro argomento.

@arguments è una variabile speciale che contiene un elenco di tutte le tesi del mixin:

.mixin(@a; @b) {p1: @arguments; p2:extract(@arguments,2); p3:@b;} 
p {.mixin(1; 2);} 

uscite:

p { 
    p1: 1 2; 
    p2: 2; 
    p3: 2; 
} 

Quindi la variabile @arguments può essere utilizzato in qualsiasi mixin e non richiede un argomento ....

Come sarebbe un chiamante per un mixin come questo? .mixin (@a; ...) potrebbe essere qualcosa del genere: .mixin (@ a, 53px); ? In che modo determina dove va il 53px?

Il 53px non è assegnato a una variabile, ma è il secondo elemento dell'elenco di strumenti @. Puoi ottenerlo per extract(@arguments,2).

Un esempio di utilizzo di .mixin(@a; ...) {} può essere assegnare una proprietà sempre quando .mixin() indipendentemente il numero di argomenti, esempio:

.mixin(@a; ...) { color: @a;} 
.mixin(@a) { background-color: contrast(@a); width:100%;} 
.mixin(@a; @b;) { background-color: contrast(@a); width:@b;} 
div { 
.mixin(red); 
} 
div.small { 
.mixin(red,50%); 
} 

uscite:

div { 
    color: red; 
    background-color: #ffffff; 
    width: 100%; 
} 
div.small { 
    color: red; 
    background-color: #ffffff; 
    width: 50%; 
} 

informa che le .mixin(@a; @rest...) {} assegna 35px la primo elemento della lista @rest. E così il seguente codice Meno:

.mixin(@color,@padding...) { 
    color: @color; 
    padding: @padding 
} 
div { 
.mixin(red; 10px; 20px; 5px; 5px); 
} 

uscite:

div { 
    color: red; 
    padding: 10px 20px 5px 5px; 
}