¿Cuál es el propósito de LESS lib-css mixin?

El .lib-css()mixin se usa mucho en archivos Magento 2 LESS. Sin embargo, su propósito no es aparente, y las definiciones de mixin no proporcionan ninguna documentación útil:

//
// Añadir cualquier propiedad css
// ---------------------------------------------

.lib-css (
    @_propiedad,
    @_valor,
    @_prefijo: 0
) cuando (@_prefix = 1)
  y no (@_value = '')
  y no (@_value = false)
  y no (extraer (@_ valor, 1) = falso)
  y no (extraer (@_ valor, 2) = falso)
  y no (extraer (@_ valor, 3) = falso)
  y no (extraer (@_ valor, 4) = falso)
  y no (extracto (@_ valor, 5) = falso) {
  -webkit - @ {_ propiedad}: @_value;
       -moz - @ {_ propiedad}: @_value;
        -ms - @ {_ propiedad}: @_value;
}

.lib-css (
    @_propiedad,
    @_valor,
    @_prefijo: 0
) cuando no (@_value = '')
  y no (@_value = false)
  y no (extraer (@_ valor, 1) = falso)
  y no (extraer (@_ valor, 2) = falso)
  y no (extraer (@_ valor, 3) = falso)
  y no (extraer (@_ valor, 4) = falso)
  y no (extracto (@_ valor, 5) = falso) {
    @{_El valor de la propiedad;
}

Pude ver por qué querrías usar el mixin para agregar prefijos de proveedor a las propiedades CSS de vanguardia (aunque ya hay pocas propiedades donde sea necesario), pero la razón para generar propiedades CSS normales usando este mixin no está clara. ¿Alguien puede arrojar luz sobre esto?

Los únicos usos que puedo ver son los prefijos y la eliminación de reglas previamente declaradas:

Prefijos

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

Saldrá:

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

Eliminar reglas previamente declaradas en lugar de desarmarlas

.lib-css()ofrece la posibilidad de eliminar todas las reglas que usan una determinada variable en lugar de desarmarlas o establecerlas en 0o none. Por ejemplo, digamos que queremos eliminar todas las reglas que usa @button__shadow. Como:

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

Si fuera solo por un elemento, sería más fácil escribir box-shadow: none;. Pero si esto está en digamos 20 elementos, será más rápido eliminarlos todos así:

@button__shadow: false;

Esto tiene el beneficio adicional de usar, @variable: noneya que reduce las líneas de código, en lugar de agregar más.

Entonces compare estos dos métodos:

MENOS

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

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

// Or alternatively

@button__shadow: 0;

Salida

MENOS

@button__shadow: false;

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

Salida

No hay salida, las reglas no se procesan

Esto parece una buena idea, pero los casos de uso parecen bastante pequeños. Lo más probable es que solo lo use para los prefijos. Sería mucho más útil si @variable: falsepudiera establecerse localmente, por ejemplo solo dentro de un div, desafortunadamente no pude hacer que esto funcionara.

Uso del núcleo

He notado que algunas variables están configuradas en falso de forma predeterminada, como las que están en lib/web/css/source/lib/variables/_buttons.less, supongo que esto es así para que no se emitan hasta que se requiera. También una buena idea.

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

La combinación .lib-css () se usa para establecer cualquier propiedad css si una variable le pasa un valor. (p.ej)

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

También .lib-css () puede agregar prefijos -ms-, -webkit- y -moz- si es necesario.

Si la variable se establece en falso , el mixin .lib-css () no agregará nada al código.

por favor revise las variables .lib-css

También puedes encontrar menos ayuda en

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