Какова цель микса LESS lib-css?

17

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

//
// Добавить любое свойство CSS
// ---------------------------------------------

.lib-CSS (
    @_свойство,
    @_значение,
    @_prefix: 0
) когда (@_prefix = 1)
  а не (@_value = '')
  и нет (@_value = false)
  а не (извлечение (@_ значение, 1) = ложь)
  и нет (извлечение (@_ значение, 2) = ложь)
  и нет (извлекать (@_ значение, 3) = ложь)
  и нет (извлечение (@_ значение, 4) = ложь)
  а не (извлекать (@_ value, 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ свойство}: @_value;
        -ms - @ {_ свойство}: @_value;
}

.lib-CSS (
    @_свойство,
    @_значение,
    @_prefix: 0
) когда нет (@_value = '')
  и нет (@_value = false)
  а не (извлечение (@_ значение, 1) = ложь)
  и нет (извлечение (@_ значение, 2) = ложь)
  и нет (извлекать (@_ значение, 3) = ложь)
  и нет (извлечение (@_ значение, 4) = ложь)
  а не (извлекать (@_ value, 5) = false) {
    @{_стоимость имущества;
}

Я мог понять, почему вы захотите использовать миксин для добавления префиксов вендоров в самые современные свойства CSS (хотя таких свойств больше не требуется), но причина вывода обычных свойств CSS с помощью этого миксина не ясна. Кто-нибудь может пролить свет на это?

magento2 frontend less-css

— Эрик Хансен
источник

1

Мне интересно то же самое, в коде Magento это кажется противоречивым. Например, когда фон объявлен с переменной, иногда они используют .lib-css, а иногда нет, даже в одном и том же файле.

— Бен Крук

Моя теория заговора по этому вопросу заключается в том, что некоторые разработчики в Magento хотели иметь функцию «меньше полезности», которую можно было бы использовать вместо «меньше по умолчанию». Это был скорее «способ кодирования меньше», чем необходимый для конкретной цели. Но я хотел бы услышать, что другие люди могут подумать об этом.

— circleix

1

Авторефиксатор не был крут?

— Лоренцо

12

Единственное, что я вижу, это префиксы и удаление ранее объявленных правил:

Приставки

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бы его можно было установить локально, например, только в пределах одного деления, к сожалению, я не смог заставить это работать.

Основное использование

Я заметил, что некоторые переменные по умолчанию установлены в 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;

— Бен Крук
источник

3

.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 () ничего не добавит в код.

пожалуйста, просмотрите переменные .lib-css

также вы можете найти все меньше помощи под

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

— Сатиш Рана
источник

1

Спасибо за ваш ответ, но до сих пор неясно, почему это: .lib-css(border-radius, @button__border-radius); было бы лучше, чем: border-radius: @button__border-radius;

— Эрик Хансен

также вы можете напрямую написать свойство CSS и его значение следующим образом .lib-css (border-radius, 5px);

— Сатиш Рана