Apa tujuan dari mixin lib-css KURANG?


17

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?


1
Saya bertanya-tanya hal yang sama, dalam kode Magento sepertinya tidak konsisten. Misalnya di mana latar belakang dideklarasikan dengan variabel kadang-kadang mereka menggunakan .lib-css dan kadang-kadang tidak, bahkan di dalam file yang sama.
Ben Crook

Teori konspirasi saya yang satu ini adalah bahwa beberapa pengembang di Magento ingin memiliki fungsi utilitas yang lebih sedikit yang dapat digunakan sebagai ganti kurang dari standar. Ini lebih merupakan 'cara pengkodean yang lebih sedikit' daripada yang dibutuhkan juga untuk tujuan tertentu. Tetapi saya ingin mendengar apa yang orang lain pikirkan tentang ini.
circleix

1
autoprefixer tidak cukup keren?
Lorenzo

Jawaban:


12

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

Magento 2 Lebih sedikit

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;

3

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);
}

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

Anda juga dapat menemukan semua bantuan kurang di bawah

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

1
Terima kasih atas jawaban Anda, tetapi masih belum jelas mengapa ini: .lib-css(border-radius, @button__border-radius); akan lebih baik daripada: border-radius: @button__border-radius;
Erik Hansen

Anda juga dapat langsung menulis Properti CSS dan nilai seperti ini. Lib-css (border-radius, 5px);
Satish Rana
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.