次のメリット ミックスイン(Mixin)は、Sassで再利用可能なスタイルのセットを定義するための機能です。ミックスインを使用すると、同じスタイルを複数のセレクタで共有することができます。その中で、特にメディアクエリで活躍します。ウェブページやアプリケーションが異なるデバイスに適応し、レイアウトや表示を最適化すること。
特定の画面サイズに対するスタイルを指定する場合、以下のようなミックスインを定義することができます
@mixin sp($breakpoint) {
@media screen and (max-width: $breakpoint) {
@content;
}
}
.要素{
width: 100%;
@include sp(768px) {
width: 50%;
}
}
上記のようなコードで簡単に要素に対して、ブレークポイント768px
以下の場合に幅を50%
に変更するスタイルを適用できるとのこと。この時はあまり分かりませんでしたが、後程、便利さを知ることができました。