Apa tujuan dari mixin lib-css KURANG?

The .lib-css()mixin digunakan berat dalam file Magento 2 KURANG. Namun tujuannya tidak jelas, dan definisi mixin tidak memberikan dokumentasi yang membantu:

//
// Tambahkan properti css
// ---------------------------------------------

.lib-css (
    @_Properti,
    @_nilai,
    @_prefix: 0
) when (@_prefix = 1)
  dan tidak (@_value = '')
  dan tidak (@_value = false)
  dan tidak (ekstrak (nilai @_, 1) = salah)
  dan tidak (ekstrak (nilai @_, 2) = salah)
  dan tidak (ekstrak (nilai @_, 3) = salah)
  dan tidak (ekstrak (nilai @_, 4) = salah)
  dan tidak (ekstrak (nilai @_, 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

.lib-css (
    @_Properti,
    @_nilai,
    @_prefix: 0
) ketika tidak (@_value = '')
  dan tidak (@_value = false)
  dan tidak (ekstrak (nilai @_, 1) = salah)
  dan tidak (ekstrak (nilai @_, 2) = salah)
  dan tidak (ekstrak (nilai @_, 3) = salah)
  dan tidak (ekstrak (nilai @_, 4) = salah)
  dan tidak (ekstrak (nilai @_, 5) = false) {
    @{_nilai properti;
}

Saya bisa melihat mengapa Anda ingin menggunakan mixin untuk menambahkan awalan vendor ke properti CSS edge edge (meskipun ada beberapa properti yang diperlukan lagi), tetapi alasan untuk menghasilkan properti CSS normal menggunakan mixin ini tidak jelas. Adakah yang bisa menjelaskan ini?

Satu-satunya kegunaan yang dapat saya lihat adalah awalan dan menghapus aturan yang dinyatakan sebelumnya:

Awalan

body {
    .lib-css(transition, color .5s ease, @_prefix: 1);
}

Akan menampilkan:

body {
    webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

Menghapus aturan yang dideklarasikan sebelumnya alih-alih menghapusnya

.lib-css()memberikan kemampuan untuk menghapus setiap aturan yang menggunakan variabel tertentu alih-alih membatalkannya atau mengaturnya ke 0atau none. Misalnya katakanlah kami ingin menghapus setiap aturan yang digunakan @button__shadow. Seperti:

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

Jika hanya untuk satu elemen maka akan lebih mudah untuk menulis box-shadow: none;. Tetapi jika ini dikatakan 20 elemen, akan lebih cepat untuk menghapus semuanya seperti:

@button__shadow: false;

Ini memiliki manfaat tambahan menggunakan @variable: nonekarena mengurangi baris kode, daripada menambahkan lebih banyak.

Jadi, bandingkan dua metode ini:

KURANG

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

.product-list button {
    box-shadow: none;
}

// Or alternatively

@button__shadow: 0;

Keluaran

KURANG

@button__shadow: false;

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

Keluaran

Tidak ada output, aturan tidak diproses

Ini memang tampak seperti ide yang bagus tetapi kasus penggunaannya tampak sangat kecil. Saya akan lebih cenderung menggunakannya untuk awalan. Akan jauh lebih berguna jika @variable: falsedapat diatur secara lokal, misalnya hanya dalam satu div, sayangnya saya tidak bisa mendapatkan ini berfungsi.

Penggunaan inti

Saya perhatikan beberapa variabel disetel ke false secara default, seperti yang ada di lib/web/css/source/lib/variables/_buttons.less, saya kira ini tidak akan dikeluarkan sampai diperlukan. Ide yang bagus juga.

//  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;

The Lib-css () mixin digunakan untuk mengatur setiap properti css jika ada nilai yang dikirimkan kepadanya oleh variabel. (misalnya)

[![.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);
}

Juga .lib-css () dapat menambahkan awalan -ms-, -webkit- dan -moz- jika diperlukan.

Jika variabel disetel ke false , mixin .lib-css () tidak akan menambahkan apa pun pada kode.

tinjau variabel .lib-css

Anda juga dapat menemukan semua bantuan kurang di bawah

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