Jaki jest cel miksu LESS lib-css?

The .lib-css()Wstawek jest używany intensywnie w plikach Magento 2 mniej. Jednak jego cel nie jest oczywisty, a definicje mixin nie dostarczają żadnej przydatnej dokumentacji:

//
// Dodaj dowolną właściwość css
// ---------------------------------------------

.lib-css (
    @_własność,
    @_wartość,
    @_prefiks: 0
) kiedy (@_prefix = 1)
  i nie (@_value = '')
  i nie (@_value = false)
  i nie (ekstrakt (wartość @, 1) = fałsz)
  i nie (wyciąg (wartość @, 2) = fałsz)
  i nie (wyciąg (wartość @, 3) = fałsz)
  i nie (ekstrakt (wartość @, 4) = fałsz)
  i nie (wyodrębnij (wartość @, 5) = fałsz) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ właściwość}: @_value;
        -ms - @ {_ właściwość}: @_value;
}

.lib-css (
    @_własność,
    @_wartość,
    @_prefiks: 0
) kiedy nie (@_value = '')
  i nie (@_value = false)
  i nie (ekstrakt (wartość @, 1) = fałsz)
  i nie (wyciąg (wartość @, 2) = fałsz)
  i nie (wyciąg (wartość @, 3) = fałsz)
  i nie (ekstrakt (wartość @, 4) = fałsz)
  i nie (wyodrębnij (wartość @, 5) = fałsz) {
    @{_wartość nieruchomości;
}

Mogłem zrozumieć, dlaczego chcesz używać mixinu do dodawania prefiksów dostawców do najnowocześniejszych właściwości CSS (chociaż jest jeszcze kilka właściwości, w których jest to konieczne), ale powód wyświetlania normalnych właściwości CSS za pomocą tej mieszanki nie jest jasny. Czy ktoś może rzucić na to światło?

Jedyne zastosowania, które widzę, to przedrostki i usuwanie wcześniej zadeklarowanych reguł:

Prefiksy

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

Wyjdzie:

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

Usuwanie wcześniej zadeklarowanych reguł zamiast ich wyłączania

.lib-css()daje możliwość usunięcia każdej reguły korzystającej z pewnej zmiennej zamiast ich rozbrojenia lub ustawienia na 0lub none. Powiedzmy na przykład, że chcemy usunąć każdą używaną regułę @button__shadow. Jak na przykład:

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

Gdyby tylko jeden element był łatwiejszy do napisania box-shadow: none;. Ale jeśli powiedzmy, że jest to 20 elementów, szybciej je wszystkie usuniesz:

@button__shadow: false;

Ma to tę dodatkową zaletę, @variable: noneże zmniejsza liczbę wierszy kodu zamiast dodawać więcej.

Porównaj więc te dwie metody:

MNIEJ

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

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

// Or alternatively

@button__shadow: 0;

Wynik

MNIEJ

@button__shadow: false;

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

Wynik

Brak wyników, reguły nie są przetwarzane

To wydaje się dobrym pomysłem, ale przypadki użycia wydają się dość małe. Bardziej prawdopodobne, że użyję go jako prefiksu. Byłoby o wiele bardziej przydatne, gdyby @variable: falsemożna go ustawić lokalnie, na przykład tylko w obrębie jednego diva, niestety nie udało mi się tego uruchomić.

Wykorzystanie rdzenia

Zauważyłem, że niektóre zmienne są domyślnie ustawione na fałsz, takie jak te w lib/web/css/source/lib/variables/_buttons.less, zakładam, że tak, więc nie są wyprowadzane, dopóki nie będą wymagane. Również dobry pomysł.

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

Lib-css () mixin służy do ustawiania jakichkolwiek właściwości CSS, jeśli istnieje wartość przekazana mu przez zmienną. (na przykład)

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

Również .lib-css () może w razie potrzeby dodawać prefiksy -ms-, -webkit- i -moz- .

Jeśli zmienna ma wartość false , mieszanie .lib-css () nie doda nic do kodu.

przejrzyj zmienne .lib-css

również mniej znajdziesz pomoc pod

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