Jaki jest cel miksu LESS lib-css?

17

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?

Erik Hansen
źródło
1
Zastanawiam się nad tym samym, w kodzie Magento wydaje się to niespójne. Na przykład, gdy tło jest deklarowane zmienną, czasami używają .lib-css, a czasem nie, nawet w tym samym pliku.
Ben Crook,
Moja teoria spiskowa dotyczy tego, że niektórzy programiści Magento chcieli mieć funkcję mniej użyteczną, której można by użyć zamiast domyślnie mniejszej. Był to raczej „sposób kodowania mniej” niż potrzebny również do określonego celu. Ale chciałbym usłyszeć, co inni ludzie mogą o tym myśleć.
circlesix
1
autoprefixer nie był wystarczająco fajny?
Lorenzo,

Odpowiedzi:

12

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

Magento 2 mniej

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;
Ben Crook
źródło
3

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

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

również mniej znajdziesz pomoc pod

<magento install directory>\lib\web\css\docs\utilities.html
Satish Rana
źródło
1
Dzięki za odpowiedź, ale nadal nie jest jasne, dlaczego to: .lib-css(border-radius, @button__border-radius); byłoby lepsze niż: border-radius: @button__border-radius;
Erik Hansen
możesz także bezpośrednio napisać Właściwość CSS i wartość taką jak ta .lib-css (border-radius, 5px);
Satish Rana