CSS プリプロセッサは必要ありません

ネイティブ CSS は、ここ数か月または数年で大きな進歩を遂げました。この投稿では、人々が SASS、LESS、Stylus などの CSS プリプロセッサを使用する主な理由を説明し、これらと同じことをネイティブ CSS で実現する方法を示します。

ファイルを分割する

ファイルの分割は、人々がプリプロセッサを使用する主な理由の 1 つです。ただし、かなり長い間、別のファイルを CSS ファイルにインポートすることができました。こんな感じです

@import url("./utils.css");

アンカー タグやその他のリソースの href の場合と同じように、相対パスまたは絶対パスを使用できます。

これとプリプロセッサの主な違いは、プリプロセッサはコンパイル時に結合するのに対し、CSS は実行時に http リクエストを行うことです。

ネストルール

これがプリプロセッサを使用する主な理由です。少なくとも、これが私が過去にこれを使用した主な理由です。

しかし、CSS はネストをサポートするようになり、プリプロセッサの使用に慣れている方法でほとんど動作します。

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

非常に素晴らしいですね。私たちが何十年も続けてきたように CSS を書くことには、なんと大きな利点があるのでしょう。

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Sudo セレクター

Sudo セレクターは、プリプロセッサでも使い慣れているネイティブ CSS で同じように機能します。

button {
  color: blue;

  &:hover {
    color: purple;
  }
}

ネストの詳細については、MDN を参照してください。

変数

長い間、プリプロセッサが必要な理由は変数でした。すべての色、間隔などを 1 つのファイルにまとめて、どこにいてもグローバルに更新できます。

そうですね、しばらくの間はネイティブ CSS でそれを行うことができます。実際、いくつかの点でプリプロセッサよりも優れています。

グローバル変数

グローバル変数は :root ルールで囲まれます。これらはどこからでも参照できます。

:root {
  --bg-color: #333;
}

変数を使用するには、var タグで参照する必要があります

button {
  background-color: var(--bg-color);
}

スコープ付き変数

セレクターで変数をスコープすることもできます。たとえば...

header {
  --bg-color: #999;
}

この場合、var(--bg-color); を参照します。ヘッダー セレクター内では #999;

が返されます。

実行時に値を再割り当てする

つまり、プリプロセッサに対する CSS 変数の主な利点は、実行時にオーバーライドできることであり、プリプロセッサは一度コンパイルされると永続的になるということです。

たとえば、ライト モードとダーク モードをサポートしたい Web サイトがあるとします。これは、CSS 変数を使用すると非常に簡単に実現できます。

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

プリプロセッサでこのようなことを実現するには、JavaScript を使用して本体のクラスを切り替え、.dark クラスなどですべてのルールをオーバーライドする必要があります。

計算

LESS、Stylus、SASS などのほとんどのプリプロセッサでは、計算を行うことができます。変数を半分に分割したい場合と同様です。

calc 関数を使用すると、ネイティブ CSS でこれを行うことができます。

@import url("./utils.css");

それはなんてクールですか?

色を変える

もう 1 つの人気のある機能 (少なくとも私にとっては) は、CSS プリプロセッサで色を明るくしたり暗くしたりすることです。 color-mix を使用して、ネイティブ CSS でもこれを実行できるようになりました。

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

上記は、プリプロセッサで lighten(red, 50%) を使用して行うことに慣れていることと同等です。

暗くするには、白の代わりに黒を混ぜるだけです

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

次回プロジェクトで使用するツールを選択するときは、ネイティブ CSS を試してみてください。長い道のりを歩んできました。

以上がCSS プリプロセッサは必要ありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。