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

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?

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;

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