Sass を書き始めて以来、私は常にミックスインを使うのが大好きでした。 スタイル宣言を複製する代わりに、ミックスインが一挙にそれを処理します。 ミックスインは、CSS仕様にはないSassの非常に強力な機能です…それでも! 幸いなことに、Sassがまだ存在し、より多くの企業がSassを採用している限り、より多くのコードをコードベース内でDRYおよびモジュール式に保つことができます。

これが.sass構文の例でどのように機能するかを見てみましょう。

書くことができるSassには2つのタイプがあります。 .scssはセミコロンと中括弧を使用し、.sassはこれらの文字を使用しません。

シナリオ

ページに多くのコンポーネントがあり、おそらくある種のカードコンポーネントがグリッドに配置されているとします。 そして、そのカード、つまり親コンポーネントには、すべて水平方向と垂直方向の中央に配置された子があります。 どのように振っても、これらの子は常に垂直方向と水平方向の中央に配置されます。

CSSの歴史の中で最も困難なことの1つを達成するために、さまざまな種類のハックを何回使用しましたか? その闘争は現実のものでしたが、今日ではわずか3行のコードでそれを達成できます。 私を信じないの?

flexbox プロパティをミックスインの省略形と組み合わせて、必要に応じてあらゆる場所で使用できるコードのブロックを作成します。

ミックスインの優れている点は、さまざまなシナリオで複数のミックスインを作成し、必要に応じてそれらを交換できることです。

コード-前

多くの場合、ミックスインの作成に使用する構文は、以下の例を反映しています。

@mixin center-content
  display: flex
  justify-content: center
  align-items: center

.parent-container
  @include center-content

@mixin構文とそれに続くミックスイン名を使用して、ミックスインを宣言します。 私たちはそれを使用するときに適用されるスタイルに従ってそれに従います。

そのミックスインを使用することにした場合、クラス内に@includeの後にミックスインの名前を追加します。 これは次のようにコンパイルされます。

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

コード-後

「@」記号を使用してミックスインを宣言して含める代わりに、.sass構文を使用するときに、それぞれ「=」記号と「+」記号を省略形として使用し始めることができます。

この素晴らしい速記を使用して、上記とまったく同じことを行うことができます。

=center-children
  display: flex
  justify-content: center
  align-items: center

.parent-container
  +center-children

この方法でミックスインを作成することは、それを行うためのより速い方法です。 上記のコードは次のようにコンパイルされます。

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

かなりきちんとしていますよね? Sassでできるクールなトリックやことがたくさんあるので、CSSではまだできませんが、それは急速に変化しています。 CSSは素晴らしく、自分自身をCSS開発者だと思っていることを誇りに思います。 CSSは、Sass、Less、およびStylusがCSS変数(カスタムプロパティ)のように実行できるいくつかの優れた機能を実装し始めています。 CSS Nesting のサポートもまもなく登場するはずです!

まとめ

Sassプリプロセッサを使用してCSSスタイルを記述している場合は、この知識の断片を楽しんでいただけたと思います。 私が言ったように、あなたができるすべての素晴らしいことについては、Sassのドキュメントをチェックしてください。 そして忘れないでください、CSSは素晴らしく、どこにも行きません!