SASS でのミックスイン

ミックスインは CSS プリプロセッサによって提供されるツールですが、関数ではありませんが、そのように認識でき、主な用途はコードを再利用することです。

同じことを行うが単一の値を変更する複数のクラス、たとえばフォント サイズの複数のクラスを作成する必要が何度かありました。

よく見ると、このシナリオで変更されるのは、クラスの名前とフォント サイズの値を設定するための数値だけです。ミックスインを使用すると、このコードを自動的に作成する関数を作成できます。

例:

コードをコンパイルすると、最初と同じ結果が得られますが、コードが結果よりも長いと思われるかもしれません。おそらくそれは真実ですが、たとえば次のようにしたい場合は、 1から100までを指定してfs-1からfs-100までのクラスを作成 mixinでも出来ます

これで期待どおりの結果が得られます。これはフォント サイズだけでなく、思いつくものすべてに対して機能し、ミックスイン内の小さなコード ブロックで大量のコードを構築できます。

今回はこれですべてです。ミックスインの使用方法とプリプロセッサで CSS コードを再利用する方法を学びました。

以上がSASS でのミックスインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。