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

17

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?

Erik Hansen
fuente
1
Me pregunto lo mismo, dentro del código de Magento parece ser inconsistente. Por ejemplo, cuando el fondo se declara con una variable, algunas veces usan .lib-css y otras no, incluso dentro del mismo archivo.
Ben Crook
Mi teoría de la conspiración en este caso es que algunos de los desarrolladores de Magento querían tener una función menos de utilidad que se pudiera usar en lugar de menos. Esto era más una 'forma de codificar menos' que una necesidad para un propósito específico. Pero me encantaría saber lo que otras personas podrían pensar sobre esto.
circlesix
1
el autocorrector no fue lo suficientemente bueno?
Lorenzo

Respuestas:

12

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

Magento 2 Menos

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

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

También puedes encontrar menos ayuda en

<magento install directory>\lib\web\css\docs\utilities.html
Satish Rana
fuente
1
Gracias por su respuesta, pero aún no está claro por qué esto: .lib-css(border-radius, @button__border-radius); sería mejor que: border-radius: @button__border-radius;
Erik Hansen
también puede escribir directamente propiedades CSS y valores como este .lib-css (border-radius, 5px);
Satish Rana