@Apply trong CSS là gì?

Trước hết, tôi đang đề cập đến thẻ CSS.

Tôi đã googled @apply tìm kiếm trên nhưng không thể tìm thấy bất kỳ điều gì có thể giải thích ý nghĩa của nó một cách chính xác cho tôi.

Việc sử dụng thẻ như vậy là gì?

cách giải thích đơn giản sẽ là; đưa các biến vào css (là một tính năng của bộ tiền xử lý như sass) và mixin có chức năng giống như các hành vi (cũng trong bộ tiền xử lý).

hãy tưởng tượng đó --header-themelà một hàm (mixin)

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

bằng cách này bạn có thể sử dụng nó ở nhiều nơi khác nhau mà không cần phải viết lại nó KHÔ

bây giờ phần biến có thể giải thích với ví dụ này

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

mixin sẽ có một biến được gửi đến nó và thay đổi màu sắc

đây không phải là giới hạn của tính năng, bạn có thể sử dụng nó cho nhiều hơn nữa, bạn có thể đọc thêm về mixin và các biến trong SASS để biết các cách sử dụng khác, sau khi tôi đề xuất bạn đọc bài đăng trên blog này

Bây giờ sau khi tôi đã làm cho bạn phấn khích, thời gian cho tin xấu, nó chưa được triển khai trong trình duyệt chrome , vẫn đáng để biết rằng nó sẽ đến và có thể nếu bạn muốn chuẩn bị cho mình, hãy bắt đầu với SASS

@applylà từ một đề xuất đã bị bỏ qua và được thay thế bằng CSS Shadow Parts .

quy tắc @apply, cho phép tác giả lưu trữ một tập hợp các thuộc tính trong một biến được đặt tên, sau đó tham chiếu chúng trong các quy tắc kiểu khác.

@applykhá tuyệt. Về cơ bản, nó cho phép bạn sử dụng lại các khối CSS mà không cần phải sao chép chúng xung quanh và không cần phải sửa đổi bộ chọn của chúng.

Nó sẽ giúp sử dụng các khung CSS dễ dàng hơn và đồng thời giữ các tên lớp ngữ nghĩa.

Tôi thấy bài viết này là một sự giới thiệu tốt cho tính năng này.

Thật không may, hiện tại, hỗ trợ trình duyệt về cơ bản là không tồn tại . Nó có thể được sử dụng với bộ xử lý trước CSS như PostCSS .

Tương lai cũng không chắc chắn, nếu tôi hiểu rõ. Người ủng hộ chính đằng sau tính năng này đã ngừng hỗ trợ nó .