[CSS]Sassの@mixinとは？使い方もサクッと紹介

Sassのmixinについての機能や使い方を紹介します。

Sassの@mixinとは？

mixinとは別で定義したスタイルを@includeでなんども呼び出せるというものです。関数的な使い方ができるので便利です。

例えばよく使うスタイルを@mixinで定義しておけば、どこからでも@includeで呼び出せるのでコードがすっきり、メンテナンス性も高まります。

@mixinをさっそく使う

先ほども少し紹介しましたが、@mixinで定義して@includeで再利用する。

ここでは@mixinでボックスの縦横の長さを定義しています。

その後に@includeで呼び出し、色は別で赤をスタイルしました。簡単ですね。

@mixinで引数を使う

さらに掘り下げて。@mixinで引数を使用することができます。ほんと関数に似ていますね。

引数を使う場合は@include(引数の値)と記述します。

複数の引数を使用する

引数は一つだけではなく、複数の引数も使用できます。