LESS lib-css mixinの目的は何ですか？

.lib-css()ミックスインは、Magentoの2 LESSファイルに頻繁に使用されます。ただし、その目的は明らかではなく、ミックスインの定義には有用なドキュメントはありません。

//
// cssプロパティを追加します
// ---------------------------------------------

.lib-css（
    @_property、
    @_値、
    @_prefix：0
）when（@_prefix = 1）
  ではなく（@_value = ''）
  でなく（@_value = false）
  でなく（extract（@_ value、1）= false）
  でなく（extract（@_ value、2）= false）
  でなく（extract（@_ value、3）= false）
  でなく（extract（@_ value、4）= false）
  and not（extract（@_ value、5）= false）{
  -webkit-@ {_ property}：@_value;
       -moz-@ {_ property}：@_value;
        -ms-@ {_ property}：@_value;
}

.lib-css（
    @_property、
    @_値、
    @_prefix：0
）ない場合（@_value = ''）
  でなく（@_value = false）
  でなく（extract（@_ value、1）= false）
  でなく（extract（@_ value、2）= false）
  でなく（extract（@_ value、3）= false）
  でなく（extract（@_ value、4）= false）
  and not（extract（@_ value、5）= false）{
    @ {_ property}：@_value;
}

ミックスインを使用してベンダープレフィックスを最先端のCSSプロパティに追加する理由を理解できました（それが必要なプロパティはほとんどありませんが）が、このミックスインを使用して通常の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);
}

それが1つの要素だけの場合、書くのはより簡単でしょうbox-shadow: none;。しかし、これがたとえば20個の要素である場合、次のようにそれらをすべて削除する方が迅速です。

@button__shadow: false;

これには、@variable: noneコードを追加するのではなく、コードの行を減らすという利点があります。

したがって、これら2つの方法を比較してください。

もっと少なく

.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たとえば、1つのdiv内でのみローカルに設定できれば、さらに便利になりますが、残念ながらこれを機能させることはできませんでした。

コア使用

のように、デフォルトで一部の変数が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