Qual è lo scopo del mixin LESS lib-css?

Il .lib-css()mixin è molto utilizzato nei file LESS di Magento 2. Tuttavia il suo scopo non è evidente e le definizioni di mixin non forniscono alcuna documentazione utile:

//
// Aggiungi qualsiasi proprietà css
// ---------------------------------------------

lib-css (
    @_proprietà,
    @_valore,
    @_prefix: 0
) quando (@_prefix = 1)
  e non (@_value = '')
  e non (@_value = false)
  e non (extract (@_ value, 1) = false)
  e non (extract (@_ value, 2) = false)
  e non (extract (@_ value, 3) = false)
  e non (extract (@_ value, 4) = false)
  e non (extract (@_ value, 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

lib-css (
    @_proprietà,
    @_valore,
    @_prefix: 0
) quando no (@_value = '')
  e non (@_value = false)
  e non (extract (@_ value, 1) = false)
  e non (extract (@_ value, 2) = false)
  e non (extract (@_ value, 3) = false)
  e non (extract (@_ value, 4) = false)
  e non (extract (@_ value, 5) = false) {
    @{_valore della proprietà;
}

Potrei capire perché vorresti usare il mixin per aggiungere prefissi del fornitore alle proprietà CSS all'avanguardia (anche se ci sono poche proprietà dove è più necessario), ma il motivo per produrre le normali proprietà CSS usando questo mixin non è chiaro. Qualcuno può far luce su questo?

Gli unici usi che posso vedere sono i prefissi e la rimozione delle regole precedentemente dichiarate:

prefissi

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

Uscita:

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

Rimozione delle regole precedentemente dichiarate invece di annullarle

.lib-css()offre la possibilità di rimuovere ogni regola che utilizza una determinata variabile anziché annullarla o impostarla su 0o none. Ad esempio, supponiamo di voler rimuovere ogni regola che utilizza @button__shadow. Ad esempio:

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

Se fosse solo per un elemento, sarebbe più facile scrivere box-shadow: none;. Ma se diciamo 20 elementi, sarà più veloce rimuoverli tutti così:

@button__shadow: false;

Questo ha l'ulteriore vantaggio di usare @variable: nonein quanto riduce le righe di codice, invece di aggiungerne altre.

Quindi confronta questi due metodi:

DI MENO

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

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

// Or alternatively

@button__shadow: 0;

Produzione

DI MENO

@button__shadow: false;

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

Produzione

Non c'è output, le regole non vengono elaborate

Sembra una buona idea, ma i casi d'uso sembrano piuttosto piccoli. Molto probabilmente lo userò solo per i prefissi. Sarebbe molto più utile se @variable: falsepotesse essere impostato localmente, ad esempio solo all'interno di un div, purtroppo non sono riuscito a farlo funzionare.

Utilizzo di base

Ho notato che alcune variabili sono impostate su false per impostazione predefinita, come ad esempio quelle in lib/web/css/source/lib/variables/_buttons.less, presumo che sia così non vengono emesse fino a quando non sono necessarie. Anche una buona 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;

Il mixin .lib-css () viene utilizzato per impostare qualsiasi proprietà css se vi è un valore passato da una variabile. (per esempio)

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

Inoltre .lib-css () può aggiungere i prefissi -ms-, -webkit- e -moz- se necessario.

Se la variabile è impostata su false , il mixin .lib-css () non aggiungerà nulla al codice.

si prega di rivedere le variabili .lib-css

puoi anche trovare meno aiuto sotto

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