Quel est le but du mixin LESS lib-css?

Le .lib-css()mixin est largement utilisé dans les fichiers Magento 2 LESS. Cependant, son objectif n'est pas apparent et les définitions de mixin ne fournissent aucune documentation utile:

//
// Ajouter une propriété css
// ---------------------------------------------

.lib-css (
    @_propriété,
    @_valeur,
    @_prefix: 0
) quand (@_prefix = 1)
  et non (@_value = '')
  et non (@_value = false)
  et non (extraire (@_ valeur, 1) = faux)
  et non (extraire (@_ valeur, 2) = faux)
  et non (extraire (@_ valeur, 3) = faux)
  et non (extraire (@_ valeur, 4) = faux)
  et non (extraire (@_ valeur, 5) = faux) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ propriété}: @_value;
        -ms - @ {_ propriété}: @_value;
}

.lib-css (
    @_propriété,
    @_valeur,
    @_prefix: 0
) quand ce n'est pas le cas (@_value = '')
  et non (@_value = false)
  et non (extraire (@_ valeur, 1) = faux)
  et non (extraire (@_ valeur, 2) = faux)
  et non (extraire (@_ valeur, 3) = faux)
  et non (extraire (@_ valeur, 4) = faux)
  et non (extraire (@_ valeur, 5) = faux) {
    @{_valeur de la propriété;
}

Je pouvais voir pourquoi vous souhaitiez utiliser le mixin pour ajouter des préfixes de fournisseur aux propriétés CSS de pointe (bien qu'il y ait peu de propriétés où cela est nécessaire), mais la raison de la sortie des propriétés CSS normales à l'aide de ce mixin n'est pas claire. Quelqu'un peut-il faire la lumière sur cette question?

Les seules utilisations que je peux voir sont les préfixes et la suppression des règles précédemment déclarées:

Préfixes

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

Sortira:

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

Supprimer les règles précédemment déclarées au lieu de les supprimer

.lib-css()donne la possibilité de supprimer toutes les règles qui utilisent une certaine variable au lieu de les désactiver ou de les définir sur 0ou none. Par exemple, disons que nous voulons supprimer toutes les règles qui utilisent @button__shadow. Tel que:

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

Si ce n'était que pour un élément, il serait plus facile d'écrire box-shadow: none;. Mais si c'est sur disons 20 éléments, il sera plus rapide de les supprimer tous comme ça:

@button__shadow: false;

Cela a l'avantage supplémentaire d'utiliser @variable: nonecar il réduit les lignes de code, au lieu d'en ajouter plus.

Comparez donc ces deux méthodes:

MOINS

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

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

// Or alternatively

@button__shadow: 0;

Production

MOINS

@button__shadow: false;

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

Production

Il n'y a pas de sortie, les règles ne sont pas traitées

Cela semble être une bonne idée, mais les cas d'utilisation semblent assez petits. Je vais plus probablement l'utiliser pour les préfixes. Il serait beaucoup plus utile de @variable: falsepouvoir le définir localement, par exemple uniquement dans une division, malheureusement je n'ai pas pu faire fonctionner cela.

Utilisation de base

J'ai remarqué que certaines variables sont définies sur false par défaut, telles que celles de lib/web/css/source/lib/variables/_buttons.less, je suppose que c'est le cas, elles ne sont donc pas sorties tant qu'elles ne sont pas nécessaires. C'est aussi une bonne idée.

//  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;

Le mixin .lib-css () est utilisé pour définir n'importe quelle propriété css s'il y a une valeur qui lui est transmise par une variable. (par exemple)

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

De plus, .lib-css () peut ajouter des préfixes -ms-, -webkit- et -moz- si nécessaire.

Si la variable est définie sur false , le mixin .lib-css () n'ajoutera rien au code.

veuillez consulter les variables .lib-css

vous pouvez également trouver moins d'aide sous

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