Яке призначення МЕНШЕ ліб-css mixin?

.lib-css()Mixin широко використовується в Magento 2 LESS файлів. Однак його мета не очевидна, і визначення міксину не надають корисної документації:

//
// Додати будь-яке властивість css
// ---------------------------------------------

.lib-css (
    @_property,
    @_value,
    @_prefix: 0
) коли (@_prefix = 1)
  а не (@_value = '')
  а не (@_value = помилково)
  а не (витяг (значення @_, 1) = помилково)
  а не (витяг (значення @_, 2) = помилково)
  а не (витяг (значення @_, 3) = помилково)
  а не (витяг (значення @_, 4) = помилково)
  а не (витяг (значення @_, 5) = помилково) {
  -webkit - @ {_ властивість}: @_value;
       -moz - @ {_ властивість}: @_value;
        -ms - @ {_ властивість}: @_value;
}

.lib-css (
    @_property,
    @_value,
    @_prefix: 0
) коли ні (@_value = '')
  а не (@_value = помилково)
  а не (витяг (значення @_, 1) = помилково)
  а не (витяг (значення @_, 2) = помилково)
  а не (витяг (значення @_, 3) = помилково)
  а не (витяг (значення @_, 4) = помилково)
  а не (витяг (значення @_, 5) = помилково) {
    @ {_ властивість}: @_value;
}

Я міг зрозуміти, чому ви хочете використовувати mixin, щоб додати префікси постачальника до властивостей CSS, що кровоточать (хоча є декілька властивостей, де це вже потрібно), але причина для виведення нормальних властивостей CSS за допомогою цього mixin не зрозуміла. Хтось може пролити світло на це?

Єдине використання, яке я бачу, - це префікси та видалення раніше оголошених правил:

Префікси

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

Виведе:

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

Видалення раніше оголошених правил, а не скидання їх

.lib-css()дає можливість видалити кожне правило, яке використовує певну змінну, а не скидати їх або встановлювати на 0або none. Наприклад, скажімо, що ми хочемо видалити кожне правило, яке використовується @button__shadow. Як от:

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

Якби це був лише один елемент, було б легше написати box-shadow: none;. Але якщо це скажімо 20 елементів, їх буде швидше видалити так:

@button__shadow: false;

Це має додаткову перевагу використання, @variable: noneоскільки зменшує рядки коду, а не додавати більше.

Тому порівняйте ці два методи:

МЕНШЕ

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

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

// Or alternatively

@button__shadow: 0;

Вихідні дані

МЕНШЕ

@button__shadow: false;

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

Вихідні дані

Виводу немає, правила не обробляються

Це здається гарною ідеєю, але випадки використання здаються досить маленькими. Я швидше за все просто використаю його для префіксів. Було б набагато корисніше, якби його @variable: falseможна було встановити локально, наприклад, лише в межах одного діва, на жаль, я не зміг би це зробити.

Основне використання

Я помітив, що деякі змінні за замовчуванням встановлені на хибні, як, наприклад, в lib/web/css/source/lib/variables/_buttons.less, я припускаю, що це так, що вони не виводяться до необхідності. Також гарна ідея.

//  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 використовується для установки якого - або властивості CSS , якщо є значення , передане йому змінні. (наприклад)

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

Також .lib-css () при необхідності може додавати префікси -ms-, -webkit- та -moz- .

Якщо для змінної встановлено значення false , .lib-css () mixin нічого не додасть до коду.

перегляньте змінні .lib-css

також ви можете знайти все менше допомоги під

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