Mục đích của mixin LESS lib-css là gì?

Các .lib-css()mixin được sử dụng rất nhiều trong các tập tin Magento 2 LESS. Tuy nhiên, mục đích của nó không rõ ràng và các định nghĩa mixin không cung cấp bất kỳ tài liệu hữu ích nào:

//
// Thêm bất kỳ thuộc tính css
// ---------------------------------------------

.lib-css (
    @_bất động sản,
    @_giá trị,
    @_prefix: 0
) khi (@_prefix = 1)
  và không (@_value = '')
  và không (@_value = false)
  và không (trích xuất (@_ value, 1) = false)
  và không (trích xuất (@_ value, 2) = false)
  và không (trích xuất (@_ value, 3) = false)
  và không (trích xuất (@_ value, 4) = false)
  và không (trích xuất (@_ value, 5) = false) {
  -webkit - @ {_ property}: @_value;
       -moz - @ {_ property}: @_value;
        -ms - @ {_ property}: @_value;
}

.lib-css (
    @_bất động sản,
    @_giá trị,
    @_prefix: 0
) khi không (@_value = '')
  và không (@_value = false)
  và không (trích xuất (@_ value, 1) = false)
  và không (trích xuất (@_ value, 2) = false)
  và không (trích xuất (@_ value, 3) = false)
  và không (trích xuất (@_ value, 4) = false)
  và không (trích xuất (@_ value, 5) = false) {
    @{_giá trị tài sản;
}

Tôi có thể thấy lý do tại sao bạn muốn sử dụng mixin để thêm tiền tố của nhà cung cấp vào các thuộc tính CSS cạnh (mặc dù có một số thuộc tính cần thiết nữa), nhưng lý do xuất ra các thuộc tính CSS thông thường sử dụng mixin này là không rõ ràng. bất cứ ai có thể làm sáng tỏ về điều này?

Việc sử dụng duy nhất tôi có thể thấy là các tiền tố và loại bỏ các quy tắc đã khai báo trước đó:

Tiền tố

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

Sẽ xuất:

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

Xóa các quy tắc đã khai báo trước đó thay vì bỏ đặt chúng

.lib-css()cung cấp khả năng loại bỏ mọi quy tắc sử dụng một biến nhất định thay vì bỏ đặt chúng hoặc đặt chúng thành 0hoặc none. Ví dụ: giả sử chúng tôi muốn xóa mọi quy tắc sử dụng @button__shadow. Nhu la:

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

Nếu nó chỉ dành cho một yếu tố thì nó sẽ dễ viết hơn box-shadow: none;. Nhưng nếu đây là 20 yếu tố, sẽ nhanh hơn để loại bỏ tất cả chúng như vậy:

@button__shadow: false;

Điều này có thêm lợi ích của việc sử dụng @variable: nonevì nó làm giảm các dòng mã, thay vì thêm nhiều hơn.

Vì vậy, so sánh hai phương pháp sau:

ÍT HƠN

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

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

// Or alternatively

@button__shadow: 0;

Đầu ra

ÍT HƠN

@button__shadow: false;

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

Đầu ra

Không có đầu ra, các quy tắc không được xử lý

Điều này có vẻ như là một ý tưởng tốt nhưng các trường hợp sử dụng có vẻ khá nhỏ. Tôi sẽ chỉ sử dụng nó cho các tiền tố. Sẽ hữu ích hơn nhiều nếu @variable: falsecó thể được đặt cục bộ, ví dụ chỉ trong một div, tiếc là tôi không thể làm việc này.

Sử dụng cốt lõi

Tôi đã nhận thấy một số biến được đặt thành false theo mặc định, chẳng hạn như các biến trong lib/web/css/source/lib/variables/_buttons.less, tôi cho rằng đây là do chúng không xuất ra cho đến khi được yêu cầu. Cũng là một ý tưởng tốt.

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

Các lib-css () mixin được sử dụng để thiết lập bất cứ tài sản css nếu có một giá trị được truyền cho nó bằng một biến. (ví dụ)

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

Ngoài ra .lib-css () có thể thêm tiền tố -ms-, -webkit- và -moz- nếu cần.

Nếu biến được đặt thành false , mixin .lib-css () sẽ không thêm gì vào mã.

vui lòng xem lại các biến .lib-css

bạn cũng có thể tìm thấy tất cả sự giúp đỡ dưới

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