Qual é o objetivo do LESS lib-css mixin?

17

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?

Erik Hansen
fonte
1
Eu estou pensando a mesma coisa, dentro do código do Magento parece ser inconsistente. Por exemplo, onde o plano de fundo é declarado com uma variável, algumas vezes eles usam .lib-css e outras vezes não, mesmo dentro do mesmo arquivo.
Ben Crook
Minha teoria da conspiração sobre esta é que alguns dos desenvolvedores do Magento queriam ter uma função menos utilitária que pudesse ser usada no lugar do padrão menos. Essa era mais uma 'maneira de codificar menos' do que uma necessidade também para um propósito específico. Mas eu adoraria ouvir o que as outras pessoas podem pensar sobre isso.
circlesix
1
autoprefixer não era legal o suficiente?
Lorenzo

Respostas:

12

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

Magento 2 Menos

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

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

também você pode encontrar menos ajuda em

<magento install directory>\lib\web\css\docs\utilities.html
Satish Rana
fonte
1
Obrigado pela sua resposta, mas ainda não está claro por que isso: .lib-css(border-radius, @button__border-radius); seria melhor do que: border-radius: @button__border-radius;
Erik Hansen
também é possível escrever diretamente a propriedade CSS e o valor dessa forma .lib-css (border-radius, 5px);
Satish Rana