.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 с помощью этого миксина не ясна. Кто-нибудь может пролить свет на это?
Ответы:
Единственное, что я вижу, это префиксы и удаление ранее объявленных правил:
Приставки
Будет выводить:
Удаление ранее объявленных правил вместо их отмены
.lib-css()
дает возможность удалить все правила, которые используют определенную переменную, вместо того, чтобы сбрасывать их или устанавливать0
илиnone
. Например, допустим, мы хотим удалить все используемые правила@button__shadow
. Такие как:Если бы это было только для одного элемента, было бы легче написать
box-shadow: none;
. Но если это, скажем, 20 элементов, будет быстрее удалить их все так:Это дает дополнительное преимущество использования,
@variable: none
так как сокращает количество строк кода, а не добавляет больше.Итак, сравните эти два метода:
МЕНЬШЕ
Выход
МЕНЬШЕ
Выход
Нет выходных данных, правила не обрабатываются
Это кажется хорошей идеей, но варианты использования выглядят довольно маленькими. Я, скорее всего, просто использую его для префиксов. Было бы гораздо полезнее, если
@variable: false
бы его можно было установить локально, например, только в пределах одного деления, к сожалению, я не смог заставить это работать.Основное использование
Я заметил, что некоторые переменные по умолчанию установлены в false, например, в
lib/web/css/source/lib/variables/_buttons.less
, я предполагаю, что это так, что они не выводятся до тех пор, пока не потребуются. Также хорошая идея.источник
.Lib-CSS () Mixin используется для установки какого - либо свойства CSS , если есть значение , переданное ему переменные. (например)
Также .lib-css () может добавлять префиксы -ms-, -webkit- и -moz-, если это необходимо.
Если для переменной задано значение false , миксин .lib-css () ничего не добавит в код.
пожалуйста, просмотрите переменные .lib-css
также вы можете найти все меньше помощи под
источник
.lib-css(border-radius, @button__border-radius);
было бы лучше, чем:border-radius: @button__border-radius;