LESS lib-css mixin的目的是什么？

该.lib-css()混入在Magento的2 LESS文件大量使用。但是其目的尚不明确，mixin定义未提供任何有用的文档：

//
//添加任何CSS属性
// ---------------------------------------------

.lib-css（
    @_属性，
    @_值，
    @_prefix：0
）何时（@_prefix = 1）
  而不是（@_value =''）
  而不是（@_value = false）
  而不是（extract（@_ value，1）= false）
  而不是（extract（@_ value，2）= false）
  而不是（extract（@_ value，3）= false）
  而不是（extract（@_ value，4）= false）
  而不是（extract（@_ value，5）= false）{
  -webkit-@ {_ property}：@_value;
       -moz-@ {{property}：@_value;
        -ms-@ {_ property}：@_value;
}

.lib-css（
    @_属性，
    @_值，
    @_prefix：0
）不在（@_value =''）
  而不是（@_value = false）
  而不是（extract（@_ value，1）= false）
  而不是（extract（@_ value，2）= false）
  而不是（extract（@_ value，3）= false）
  而不是（extract（@_ value，4）= false）
  而不是（extract（@_ value，5）= false）{
    @{_适当的价值;
}

我可以理解为什么您要使用mixin向最先进的CSS属性添加供应商前缀（尽管很少有需要再使用的属性），但是不清楚使用此mixin输出常规CSS属性的原因。谁能阐明这一点？

我可以看到的唯一用途是前缀和删除先前声明的规则：

前缀

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;

所述的.lib-CSS（）混入用于设置任何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