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


17

.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属性的原因。谁能阐明这一点?


1
我想知道同一件事,在Magento的代码中,这似乎是不一致的。例如,使用变量声明背景时,有时它们使用.lib-css,有时不使用。即使在同一文件中也是如此。
本·克鲁克

我在这方面的阴谋论是,Magento的一些开发人员希望拥有较少实用程序的功能,可以代替较少的默认使用。对于特定目的,这更多是一种“更少的编码方式”,而这也是一种需要。但是我很想听听其他人对此的看法。
circleix

1
autoprefixer还不够酷吗?
洛伦佐

Answers:


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()提供删除所有使用特定变量的规则的功能,而不是取消设置或将其设置为0none。例如,假设我们要删除所有使用的规则@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;

输出量

Magento 2减

@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()混入用于设置任何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;
Erik Hansen 2015年

您也可以像这样.lib-css(border-radius,5px);直接编写CSS属性和值。
Satish Rana'1
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.