Qual é o objetivo do LESS lib-css mixin?

O .lib-css()mixin é muito usado em arquivos Magento 2 LESS. No entanto, seu objetivo não é aparente e as definições de mixin não fornecem nenhuma documentação útil:

//
// Adicione qualquer propriedade css
// ---------------------------------------------

.lib-css (
    @_propriedade,
    @_valor,
    @_prefix: 0
) quando (@_prefix = 1)
  e não (@_value = '')
  e não (@_value = false)
  e não (extrair (@_ valor, 1) = falso)
  e não (extrair (@_ valor, 2) = falso)
  e não (extrair (@_ valor, 3) = falso)
  e não (extrair (@_ valor, 4) = falso)
  e não (extrair (@_ valor, 5) = falso) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

.lib-css (
    @_propriedade,
    @_valor,
    @_prefix: 0
) quando não (@_value = '')
  e não (@_value = false)
  e não (extrair (@_ valor, 1) = falso)
  e não (extrair (@_ valor, 2) = falso)
  e não (extrair (@_ valor, 3) = falso)
  e não (extrair (@_ valor, 4) = falso)
  e não (extrair (@_ valor, 5) = falso) {
    @{_valor da propriedade;
}

Pude ver por que você desejaria usar o mixin para adicionar prefixos de fornecedores às propriedades CSS de ponta (embora existam poucas propriedades onde isso seja necessário), mas o motivo da saída de propriedades CSS normais usando esse mixin não é claro. Alguém pode esclarecer isto?

Os únicos usos que posso ver são os prefixos e a remoção de regras declaradas anteriormente:

Prefixos

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

Saída:

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

Removendo regras declaradas anteriormente em vez de desmarcá-las

.lib-css()permite remover todas as regras que usam uma determinada variável em vez de desmarcá-las ou configurá-las para 0ou none. Por exemplo, digamos que queremos remover todas as regras que usam @button__shadow. Tal como:

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

Se fosse apenas um elemento, seria mais fácil escrever box-shadow: none;. Mas se houver 20 elementos, será mais rápido removê-los da seguinte maneira:

@button__shadow: false;

Isso tem o benefício adicional de usar @variable: none, pois reduz as linhas de código, em vez de adicionar mais.

Então compare estes dois métodos:

MENOS

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

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

// Or alternatively

@button__shadow: 0;

Resultado

MENOS

@button__shadow: false;

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

Resultado

Não há saída, as regras não são processadas

Parece uma boa ideia, mas os casos de uso parecem bem pequenos. Provavelmente vou usá-lo para os prefixos. Seria muito mais útil se @variable: falsepudesse ser definido localmente, por exemplo, apenas dentro de uma div, infelizmente não consegui fazer isso funcionar.

Uso principal

Eu notei que algumas variáveis ​​são definidas como false por padrão, como as que estão dentro lib/web/css/source/lib/variables/_buttons.less, presumo que seja assim que elas não serão exibidas até que sejam necessárias. Também é uma boa ideia.

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

O .lib-css () mixin é usado para definir qualquer propriedade css se houver um valor passado por uma variável. (por exemplo)

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

Também .lib-css () pode adicionar prefixos -ms-, -webkit- e -moz-, se necessário.

Se a variável estiver definida como falsa , o .lib-css () mixin não adicionará nada ao código.

revise as variáveis ​​.lib-css

também você pode encontrar menos ajuda em

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