CSSの@applyとは何ですか？

まず、CSSタグについて言及しています。

私はグーグルで@apply検索しましたが、その意味を正しく説明できるものは何も見つかりませんでした。

そのようなタグの使用法は何ですか？

それを説明する簡単な方法は次のようになります。css（sassなどのプリプロセッサの機能）に変数を導入し、（プリプロセッサでも）動作のように機能するmixinを導入します。

それ--header-themeが関数だと想像してください（mixin）

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

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

このようにして、もう一度書き直すことなく、さまざまな場所で使用できます。DRY

これで、可変部分はこの例で説明できます

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

ミックスインには変数が送信され、色が変更されます

これは機能の制限ではありません。これをはるかに多く使用できます。このブログ投稿を読むことをお勧めした後、他の使用方法についてSASSのミックスインと変数について詳しく読むことができます。

私はあなたが興奮した後に、今、悪いニュースのための時間が、それはブラウザまだ実装されていないクロム、それはまだそれが来て、多分あなた自身を準備したい場合は、SASSで始まっていることを知っている価値があります

@applyそれ以来放棄され、CSSシャドウパーツに置き換えられた提案からのものです。

@applyルール。これにより、作成者はプロパティのセットを名前付き変数に格納し、他のスタイルルールでそれらを参照できます。

@applyかなりかっこいいです。基本的に、CSSブロックをコピーしたり、セレクターを変更したりすることなく、CSSブロックを再利用できます。

これにより、CSSフレームワークの使用が容易になり、同時にセマンティッククラス名を保持できるようになります。

この記事は、この機能の優れた入門書であることがわかりました。

残念ながら、現時点では、ブラウザのサポートは基本的に存在しません。PostCSSなどのCSSプリプロセッサで使用できます。

よく理解できれば、将来も不透明です。この機能の背後にある主な支持者は、それをサポートしなくなりました。