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?
Respostas:
Os únicos usos que posso ver são os prefixos e a remoção de regras declaradas anteriormente:
Prefixos
Saída:
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 para0
ounone
. Por exemplo, digamos que queremos remover todas as regras que usam@button__shadow
. Tal como: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: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
Resultado
MENOS
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: false
pudesse 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.fonte
O .lib-css () mixin é usado para definir qualquer propriedade css se houver um valor passado por uma variável. (por exemplo)
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
fonte
.lib-css(border-radius, @button__border-radius);
seria melhor do que:border-radius: @button__border-radius;