wake-up-neo.com

Wie erstellen Sie mehrere Box-Shadow-Werte in LESS CSS?

Lesen Sie dies

Es gibt mehrere "richtige" Antworten . Da diese Frage viel Verkehr bekommt, habe ich mir gedacht, ich sollte auf dem Laufenden bleiben, was (ich denke) die beste Antwort ist (basierend auf der LESS-Dokumentation), wenn das LESS-Projekt reifer wird, und mein angenommenes ändern antworten Sie entsprechend.


Ich verwende LESS und ich konnte keine Korrektur für das Zulassen mehrerer CSS3-Box-Schatten finden. Ich habe das folgende Mixin:

.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

und ich versuche das:

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);

Dies funktioniert in normalem CSS3, schlägt jedoch fehl, wenn eine LESS-Datei ausgeführt wird. Ich habe irgendwo gelesen, dass das Komma, das die beiden Schatten trennt, die Ursache des LESS-Parsers ist.

Weiß jemand, wie das funktioniert? Die einzige Problemumgehung, die ich mir vorstellen kann, ist das Erstellen einer zusätzlichen CSS-Datei, die meine Eigenschaften für mehrere Box-Schatten enthält.

40
Mike McLin

Die beste Lösung ist, für jede Anzahl von Schatten separate Überladungen vorzunehmen. Weniger ist die richtige Überlastauflösung:

.box-shadow(@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    box-shadow: @shadow1;
}

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

BEARBEITEN:

Ok, ich lerne immer noch über LESS, aber es scheint, dass in bestimmten Situationen ALL der Überlastungen gemischt wird, anstatt mit der am besten geeigneten Parameterliste, so dass Sie unterschiedliche Ergebnisse erhalten. Ich habe meine Mixins seitdem so überarbeitet, dass sie box-shadow-2 oder box-shadow-3 heißen, um die erwartete Anzahl von Parametern zu erreichen. Ich werde meine Antwort überarbeiten, sobald ich herausgefunden habe, was los ist/eine bessere Lösung hat.

6
Wolverine

Dies funktioniert mit neueren LESS Versionen:

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

Und diese hässlichere Version funktioniert auch mit älteren LESS-Versionen:

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");

Update: LESS wurde weiterentwickelt, daher wurde diese Antwort aktualisiert und ist nun wieder korrekt. Danke Michał Rybak

73
iamnotsam

Es sollte gut funktionieren. Ich habe es schon früher benutzt. Versuchen Sie es mit diesem Mixin: 

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}

Und dann:

.box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5));
12
elclanrs

WENIGER streift das Komma ab. Der @arguments-Wert wird also zu:

inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5);

Welcher ist als Box-Schatten ungültig.

Tun Sie dies stattdessen, wenn Sie ein Komma möchten:

@temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);

.box-shadow(@temp);
7
Camilo Martin
.box-shadow (@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    -ms-box-shadow: @shadow1;
    -o-box-shadow: @shadow1;
    box-shadow: @shadow1;
}
.box-shadow (@shadow1, @shadow2) {
    @temp: @shadow1, @shadow2;
    .box-shadow(@temp);
}
.box-shadow (@shadow1, @shadow2, @shadow3) {
    @temp: @shadow1, @shadow2, @shadow3;
    .box-shadow(@temp);
}
4
胡忠晞

Diese Frage ist etwas veraltet, da Ihre Lösung momentan funktioniert.


Allerdings versuche ich zu erklären warum, denn viele Leute scheinen das nicht zu wissen:

Das Übergeben einer Liste von durch Kommas getrennten Argumenten an ein Mixin ist ziemlich einfach: Verwenden Sie einfach Semikolon (;) anstelle von Kommas in Mixin-Aufrufen.

Aus LESS Dokumentation :

Parameter sind entweder durch ein Semikolon oder durch Kommas getrennt. Es wird empfohlen, Semikolon zu verwenden. Das Symbolkomma hat eine doppelte Bedeutung: Es kann entweder als Trennzeichen für Mix-Parameter oder als Trennzeichen für CSS-Listen interpretiert werden. Die Verwendung von Kommas als Mixin-Trennzeichen macht es unmöglich, eine durch Kommas getrennte Liste als Argument zu verwenden.

Semikolon hat keine solche Einschränkung. Wenn der Compiler mindestens ein Semikolon in einem Mixin-Aufruf oder einer -Deklaration sieht, wird davon ausgegangen, dass die Argumente durch Semikola getrennt sind. Alle Kommas gehören dann zu CSS-Listen. 


Die Mixin-Definition verwendet eine bekannte, regelmäßige Syntax:

.box-shadow(@params) {
  -webkit-box-shadow: @params;
  -moz-box-shadow: @params;
  box-shadow: @params;
}

Mixin call sollte jedoch Semikolons verwenden, um die Argumente voneinander zu trennen. Wenn Semikolons verwendet werden, werden Kommas nicht mehr als Trennzeichen behandelt und problemlos zum Mischen übergeben:

.box-shadow(
  inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);
);

Wenn (wie im obigen Fall) nur one list übergeben wird, müssen Sie am Ende ebenfalls ein Semikolon verwenden.

Check out meine Antwort zu mehreren Hintergründen , um zu sehen, wie der Mixin-Aufruf mit mehreren Parametern aussehen soll, von denen einige durch Kommas getrennte Listen sind.

4
Michał Rybak

Hier ist eine andere Lösung (die ich lieber mag):

Verwenden Sie die Funktion e() string. Beispiel: e("S1, S2") gibt S1, S2 ohne Anführungszeichen zurück.

Langes Beispiel:

Definition:

.c3_box-shadow(@val){
    -webkit-box-shadow: @val;
       -moz-box-shadow: @val;
            box-shadow: @val;
}

Verwendungszweck:

.box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") );

Ausgabe: 

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);

Referenz: http://lesscss.org/functions/#string-functions-e

0
Andrei Surdu