วัตถุประสงค์ของ LESS lib-css mixin คืออะไร?

.lib-css()mixin ถูกนำมาใช้อย่างมากในไฟล์วีโอไอพี 2 น้อย อย่างไรก็ตามจุดประสงค์ของมันไม่ชัดเจนและคำจำกัดความของ mixin ไม่มีเอกสารที่เป็นประโยชน์:

//
// เพิ่มคุณสมบัติ css ใด ๆ
// ---------------------------------------------

.LIB-CSS (
    @_property,
    @_ราคา,
    @_prefix: 0
) เมื่อ (@_prefix = 1)
  และไม่ (@_value = '')
  และไม่ (@_value = false)
  และไม่ (แยก (@_ ค่า, 1) = false)
  และไม่ (แยก (@_ ค่า 2) = false)
  และไม่ (แยก (@_ ค่า 3) = false)
  และไม่ (แยก (@_ ค่า 4) = false)
  และไม่ (แยก (@_ ค่า 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

.LIB-CSS (
    @_property,
    @_ราคา,
    @_prefix: 0
) เมื่อไม่ (@_value = '')
  และไม่ (@_value = false)
  และไม่ (แยก (@_ ค่า, 1) = false)
  และไม่ (แยก (@_ ค่า 2) = false)
  และไม่ (แยก (@_ ค่า 3) = false)
  และไม่ (แยก (@_ ค่า 4) = false)
  และไม่ (แยก (@_ ค่า 5) = false) {
    @ {_ property}: @_value;
}

ฉันเห็นว่าทำไมคุณถึงต้องการใช้ mixin เพื่อเพิ่มคำนำหน้าผู้ขายเพื่อให้คุณสมบัติ CSS edge มีเลือดออก (แม้ว่าจะมีคุณสมบัติบางอย่างที่จำเป็นอีกต่อไป) แต่เหตุผลในการแสดงผลคุณสมบัติ CSS ปกติโดยใช้ mixin นี้ไม่ชัดเจน ใครสามารถทำให้กระจ่างเกี่ยวกับเรื่องนี้?

การใช้งานที่ฉันเห็นเท่านั้นคือส่วนนำหน้าและการลบกฎที่ประกาศไว้ก่อนหน้านี้:

คำนำหน้า

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;

เอาท์พุต

น้อย

@button__shadow: false;

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

เอาท์พุต

ไม่มีเอาต์พุตกฎจะไม่ถูกประมวลผล

นี่เป็นความคิดที่ดี แต่กรณีใช้งานดูค่อนข้างเล็ก ฉันจะใช้มันสำหรับคำนำหน้า มันจะมีประโยชน์มากขึ้นถ้า@variable: falseตั้งค่าไว้ในเครื่องตัวอย่างเช่นภายใน div เดียวโชคไม่ดีที่ฉันไม่สามารถทำงานนี้ได้

การใช้งานหลัก

ฉันสังเกตเห็นว่าตัวแปรบางตัวถูกตั้งค่าเป็นเท็จโดยค่าเริ่มต้นเช่นคนที่อยู่ใน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 () mixinจะใช้ในการตั้งค่าคุณสมบัติ 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-หากจำเป็น

หากตัวแปรถูกตั้งค่าเป็นเท็จ . mix-css () mixinจะไม่เพิ่มอะไรลงในโค้ด

โปรดตรวจสอบตัวแปร. lib-css

นอกจากนี้คุณสามารถค้นหาความช่วยเหลือน้อยลงทั้งหมดภายใต้

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