Was ist der Zweck des LESS lib-css-Mixins?

17

Das .lib-css()Mixin wird häufig in Magento 2 LESS-Dateien verwendet. Der Zweck ist jedoch nicht ersichtlich, und die Mixin-Definitionen bieten keine hilfreiche Dokumentation:

//
// Eine beliebige CSS-Eigenschaft hinzufügen
// ---------------------------------------------

.lib-css (
    @_Eigentum,
    @_Wert,
    @_prefix: 0
) wenn (@_prefix = 1)
  und nicht (@_value = '')
  und nicht (@_value = false)
  und nicht (extract (@_ value, 1) = false)
  und nicht (extract (@_ value, 2) = false)
  und nicht (extract (@_ value, 3) = false)
  und nicht (extract (@_ value, 4) = false)
  und nicht (extract (@_ value, 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

.lib-css (
    @_Eigentum,
    @_Wert,
    @_prefix: 0
) wenn nicht (@_value = '')
  und nicht (@_value = false)
  und nicht (extract (@_ value, 1) = false)
  und nicht (extract (@_ value, 2) = false)
  und nicht (extract (@_ value, 3) = false)
  und nicht (extract (@_ value, 4) = false)
  und nicht (extract (@_ value, 5) = false) {
    @{_Eigentumswert;
}

Ich könnte verstehen, warum Sie das Mixin verwenden möchten, um Herstellerpräfixe zu aktuellen CSS-Eigenschaften hinzuzufügen (obwohl es nur wenige Eigenschaften gibt, in denen dies nicht mehr erforderlich ist), aber der Grund für die Ausgabe normaler CSS-Eigenschaften mit diesem Mixin ist nicht klar. Kann jemand Licht ins Dunkel bringen?

magento2 frontend less-css

— Erik Hansen
quelle

1

Ich frage mich das gleiche, in Magentos Code scheint es inkonsistent zu sein. Wenn beispielsweise background mit einer Variablen deklariert wird, verwenden sie manchmal .lib-css und manchmal auch nicht, selbst innerhalb derselben Datei.

— Ben Crook

Meine Verschwörungstheorie zu dieser lautet, dass einige der Entwickler bei Magento eine weniger nützliche Funktion haben wollten, die anstelle der Standardfunktion weniger verwendet werden könnte. Dies war eher eine Art, weniger zu codieren, als dies für einen bestimmten Zweck erforderlich war. Aber ich würde gerne hören, was andere Leute darüber denken.

— Kreiseix

1

Autoprefixer war nicht cool genug?

— Lorenzo

12

Die einzigen Verwendungen, die ich sehen kann, sind die Präfixe und das Entfernen zuvor deklarierter Regeln:

Präfixe

body {
    .lib-css(transition, color .5s ease, @_prefix: 1);
}

Wird ausgeben:

body {
    webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

Zuvor deklarierte Regeln entfernen, anstatt sie zu deaktivieren

.lib-css()gibt die Möglichkeit, jede Regel zu entfernen, die eine bestimmte Variable verwendet, anstatt sie zu deaktivieren oder auf 0oder zu setzen none. Nehmen wir zum Beispiel an, wir möchten jede Regel entfernen, die verwendet wird @button__shadow. Sowie:

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

Wenn es nur ein Element gäbe, wäre es einfacher zu schreiben box-shadow: none;. Wenn dies jedoch bei 20 Elementen der Fall ist, ist es schneller, sie alle wie folgt zu entfernen:

@button__shadow: false;

Dies hat den zusätzlichen Vorteil, @variable: nonedass Codezeilen reduziert werden, anstatt mehr hinzuzufügen.

Vergleichen Sie also diese beiden Methoden:

WENIGER

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

.product-list button {
    box-shadow: none;
}

// Or alternatively

@button__shadow: 0;

Ausgabe

WENIGER

@button__shadow: false;

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

Ausgabe

Es erfolgt keine Ausgabe, die Regeln werden nicht verarbeitet

Dies scheint eine gute Idee zu sein, aber die Anwendungsfälle scheinen ziemlich klein zu sein. Ich werde es eher nur für die Präfixe verwenden. Es wäre viel nützlicher, wenn @variable: falsees lokal eingestellt werden könnte, zum Beispiel nur innerhalb eines Div. Leider konnte ich das nicht zum Laufen bringen.

Kernnutzung

Ich habe festgestellt, dass einige Variablen standardmäßig auf false gesetzt sind, z lib/web/css/source/lib/variables/_buttons.less. Auch eine gute Idee.

//  Default = secondary button
@button__color: @primary__color;
@button__background: @color-gray95;
@button__border: 1px solid @color-gray-darken2;
@button__gradient-color-start: false;
@button__gradient-color-end: false;

— Ben Crook
quelle

3

Das Mixin .lib-css () wird verwendet, um eine beliebige CSS-Eigenschaft festzulegen, wenn ihr ein Wert von einer Variablen übergeben wird. (z.B)

[![.class {
    .lib-css(border-radius, @button__border-radius);
    .lib-css(border, @button-primary__border);
    .lib-css(color, @button-primary__color);
    .lib-css(background, @color-gray94);
    .lib-css(padding, @indent__s);
}

Außerdem kann .lib-css () bei Bedarf -ms-, -webkit- und -moz- Präfixe hinzufügen .

Wenn die Variable auf false gesetzt ist , fügt das Mixin .lib-css () dem Code nichts hinzu.

Bitte überprüfen Sie die .lib-css-Variablen

auch finden sie alle weniger hilfe unter

<magento install directory>\lib\web\css\docs\utilities.html

— Satish Rana
quelle

1

Vielen Dank für Ihre Antwort, aber es ist immer noch nicht klar, warum dies: .lib-css(border-radius, @button__border-radius); besser wäre als: border-radius: @button__border-radius;

— Erik Hansen

Sie können auch CSS-Eigenschaften und Werte wie diese direkt schreiben .lib-css (border-radius, 5px);

— Satish Rana