Weniger CSS, bitte erklären Sie mir die erweiterten Argumente und die @rest-Variable?

Question

Einfache Frage: Ich verstehe nicht, was die erweiterten Argumente in weniger CSS tun, wie http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable. Ich habe darum gekämpft, um den Kopf zu bekommen, wie es dort erklärt wird.

Ich verstehe dies:

.mixin(@a: 1) { 

Aber ich verstehe nicht, die beiden folgenden, wo die ... eingeführt:

.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 auf Argumente, die nach @a
gebunden // @arguments auf alle Argumente gebunden}

Ich lerne Less, weil ich sehr auf Bootstrap bin, aber das verwirrt mich.

Vielen Dank!

Answer 1

Nun, okay, Sie sollten auch http://lesscss.org/features/#mixins-parametric-feature-pattern-matching lesen.

In Less nur Mixin, die die Anzahl der Argumente des Aufrufers übereinstimmen kompiliert werden. Beachten Sie auch, dass wenn zwei oder mehr Mixins übereinstimmen, sie alle in CSS kompiliert werden.

Wenn Sie mixin ein Argument bekommen, wie das unten gezeigt:

.mixin(@a) {} 

Nur Anrufer mit einem Argumente Spiel und kompiliert werden: .mixin(3); or .mixin(1) und so weiter. Aber nicht .mixin() oder .mixin(1,2,3)

Wenn Sie einen Standardwert für das erste Argument gesetzt, zum Beispiel 3, wie unten dargestellt:

.mixin(@a: 3) {} 

Jetzt nur nicht Anrufe mit 1 Argumente Spiel, sondern auch Anrufe mit Null Argumenten :

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

Ausgänge:

p { 
    property: 3; 
} 

Jetzt werfen Sie einen Blick auf die spezielle ... Argument, das Argument entspricht einer beliebigen Anzahl von Argumenten. So .mixin(...) wird übereinstimmen und kompiliert die folgenden Anrufer .mixin(), .mixin(1) und .mixin(1,2,3,4).

Wenn Sie prepend einen Namen (einschließlich der @) an die ... Argument die Werte werden mit diesem Namen einer Variablen zugewiesen werden:

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

Ausgänge:

p { 
    p: one two three; 
} 

Beachten Sie, dass ... Abtretungs die Argumente zu einer Liste, die auch mit der list functions manipuliert werden kann.

Ein Mixin wie .mixin(@a; ...) ist eine Variante der beiden vorhergehenden Anwendungsfälle. Diese Mixins erfordern ein erstes Argument, gefolgt von null oder anderen Argumenten.

@arguments ist eine spezielle Variable, die eine Liste aller Argument der mixin enthält:

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

Ausgänge:

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

So ist die @arguments Variable verwendet werden kann in jedem mixin und erfordert keine ein ... Argument.

Wie würde ein Anrufer für ein solches Mixin aussehen? .mixin (@a; ...) könnte es in etwa so sein: .mixin (@ a, 53px); ? Wie ermittelt es , wo der 53px geht?

Das 53px ist keiner Variablen zugewiesen, aber es ist das zweite Element der @arguments-Liste. Sie können es erhalten, indem Sie extract(@arguments,2).

Ein Fall Verwendung für die .mixin(@a; ...) {} kann eine Eigenschaft zuweisen immer wenn .mixin() unabhängig die Anzahl der Argumente, Beispiel:

.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%); 
} 

Ausgänge:

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

Hinweis, dass die .mixin(@a; @rest...) {} Abtretungs 35px die erstes Element der @ Rest-Liste. Und so ist der folgende Weniger Code:

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

Ausgänge:

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