Quel est le but du mixin LESS lib-css?

17

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?

Erik Hansen
la source
1
Je me demande la même chose, dans le code de Magento, cela semble incohérent. Par exemple, lorsque le fond est déclaré avec une variable, parfois ils utilisent .lib-css et parfois non, même dans le même fichier.
Ben Crook
Ma théorie du complot à ce sujet est que certains des développeurs de Magento voulaient avoir une fonction moins utilitaire qui pourrait être utilisée à la place de la valeur par défaut. Il s'agissait davantage d'une «façon de coder moins» que d'une nécessité également dans un but précis. Mais j'aimerais entendre ce que les autres pourraient en penser.
circlesix
1
autoprefixer n'était pas assez cool?
Lorenzo

Réponses:

12

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

Magento 2 Less

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;
Ben Crook
la source
3

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

entrez la description de l'image ici

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

entrez la description de l'image ici

vous pouvez également trouver moins d'aide sous

<magento install directory>\lib\web\css\docs\utilities.html
Satish Rana
la source
1
Merci pour votre réponse, mais on ne sait toujours pas pourquoi cela: .lib-css(border-radius, @button__border-radius); serait mieux que: border-radius: @button__border-radius;
Erik Hansen
vous pouvez également écrire directement la propriété CSS et la valeur comme ceci .lib-css (border-radius, 5px);
Satish Rana