LESS lib-css mixin'in amacı nedir?

.lib-css()Mixin Magento 2 AZ dosyalarında yoğun olarak kullanılır. Ancak amacı belirgin değildir ve mixin tanımları yararlı herhangi bir belge sağlamaz:

//
// Herhangi bir css özelliği ekle
// ---------------------------------------------

lib-Css (
    @_Emlak,
    , @_value
    @_prefix: 0
) ne zaman (@_prefix = 1)
  ve değil (@_value = '')
  ve değil (@_value = yanlış)
  ve değil (ayıkla (_ değeri, 1) = yanlış)
  ve değil (ayıkla (_ değeri, 2) = yanlış)
  ve değil (ayıkla (_ değeri, 3) = yanlış)
  ve değil (ayıkla (_ değeri, 4) = yanlış)
  ve değil (ayıkla (_ değeri, 5) = yanlış) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

lib-Css (
    @_Emlak,
    , @_value
    @_prefix: 0
) olmadığında (@_value = '')
  ve değil (@_value = yanlış)
  ve değil (ayıkla (_ değeri, 1) = yanlış)
  ve değil (ayıkla (_ değeri, 2) = yanlış)
  ve değil (ayıkla (_ değeri, 3) = yanlış)
  ve değil (ayıkla (_ değeri, 4) = yanlış)
  ve değil (ayıkla (_ değeri, 5) = yanlış) {
    @{_mülk değeri;
}

Neden kanama kenarı CSS özelliklerine satıcı önekleri eklemek için mixin kullanmak isteyebilirsiniz (artık gerekli olan birkaç özellik olmasına rağmen), ancak bu mixin kullanarak normal CSS özellikleri çıktı nedeni net değil. Herkes buna ışık tutabilir mi?

Görebildiğim tek kullanım alanları önek ve daha önce bildirilen kuralların kaldırılmasıdır:

Önekleri

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

Çıktı olacak:

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

Önceden bildirilen kuralları kaldırmak yerine kaldırmak

.lib-css()belirli bir değişkeni kullanan her kuralı, bunları kaldırmak 0veya veya olarak ayarlamak yerine kaldırma yeteneğini verir none. Örneğin, kullanılan her kuralı kaldırmak istediğimizi varsayalım @button__shadow. Gibi:

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

Sadece bir eleman için olsaydı yazmak daha kolay olurdu box-shadow: none;. Ama eğer bu 20 elementte ise, hepsini kaldırmak daha hızlı olacaktır:

@button__shadow: false;

Bu, @variable: nonedaha fazla eklemek yerine kod satırlarını azalttığı için kullanım avantajına sahiptir .

Bu iki yöntemi karşılaştırın:

AZ

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

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

// Or alternatively

@button__shadow: 0;

Çıktı

AZ

@button__shadow: false;

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

Çıktı

Çıktı yok, kurallar işlenmiyor

Bu iyi bir fikir gibi görünüyor, ancak kullanım durumları oldukça küçük görünüyor. Daha çok önek için kullanacağım. @variable: falseYerel olarak ayarlanabiliyorsa çok daha yararlı olurdu , örneğin sadece bir div içinde, ne yazık ki bu çalışmayı alamadım.

Temel kullanım

Bazı değişkenler varsayılan olarak yanlış olarak ayarlandığını fark ettim, olanlar gibi lib/web/css/source/lib/variables/_buttons.less, bunun gerekli olana kadar çıktısı alınmadığını varsayıyorum. Ayrıca iyi bir fikir.

//  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 bir değişken tarafından kendisine iletilen bir değer olup olmadığını herhangi bir CSS özelliği ayarlamak için kullanılır. (Örneğin)

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

Ayrıca .lib-css () gerekirse -ms-, -webkit- ve -moz- önekleri ekleyebilir .

Değişken false olarak ayarlanırsa , .lib-css () mixin koda hiçbir şey eklemez.

lütfen .lib-css değişkenlerini inceleyin

ayrıca altında daha az yardım bulabilirsiniz

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