Що таке @apply в CSS?

Question 1

Перш за все, я маю на увазі тег CSS.

Я погуглив, @applyале не зміг знайти нічого, що могло б пояснити його значення для мене належним чином.

Яке використання такого тегу?

Question 2

простий спосіб пояснити це; введення змінних у css (що є особливістю препроцесорів, таких як sass), та mixin, які є функціональними, як поведінка (також у препроцесорах).

уявіть, що --header-themeце функція (міксин)

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

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

таким чином, ви можете використовувати його в багатьох різних місцях, не переписуючи знову СУХО

тепер змінна частина може пояснити на цьому прикладі

: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 та змінні в SASS для інших способів її використання, після того, як я пропоную вам прочитати цю публікацію в блозі

тепер після того, як я вас схвилював, час поганих новин, це ще не застосовано у браузерах, chrome , все-таки варто знати, що воно приходить, і, можливо, якщо ви хочете підготуватися, починайте з SASS

Question 3

@apply- від пропозиції , від якої відмовились і замінили її на CSS Shadow Parts .

правило @apply, яке дозволяє автору зберігати набір властивостей в іменованій змінній, а потім посилатися на них в інших правилах стилю.

Question 4

@applyдосить класно. В основному це дозволяє повторно використовувати блоки CSS, не копіюючи їх і не змінюючи їх селектори.

Це полегшить використання фреймворків CSS та одночасне збереження семантичних назв класів.

Я знайшов цю статтю гарним втручанням у цю функцію.

На жаль, на даний момент підтримка браузера в основному відсутня . Його можна використовувати з попереднім процесором CSS, таким як PostCSS .

Це майбутнє також непевне, якщо я добре розумію. Головний захисник цієї функції перестав її підтримувати .