TOP

コーディング

【備忘録】Sassで@mixinを使う

ご依頼内容

Sassで使う@mixinについてまとめておきます。

①@mixinとはCSSのスタイルをパッケージしておくもの

@mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。 必要な時に@mixinを呼び出すことで、まとまったスタイルを適用できます。

②@mixin基本形

@mixinでパッケージを作ります。 使うときは、@includeでパッケージを呼び出します。 [Sass] @mixin example{ border: 1px solid #fff; margin: 10px auto; } //@mixinにexampleという名前をつけました。 .box1{ @include example; background-color: #ccc; } //exampleという@mixinを呼び出し、background-colorもつけました。 [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; background-color: #ccc; } @includeで呼び出したことで、@mixin内のスタイルも適用されます。

③@mixinに引数(ひきすう)を1つ使う

このmixinにつける名前(ここではexample)に、引数を付けることができます。 引数とは、mixinパッケージの中で、使う時の都合にあわせてカスタマイズできる要素をいいます。 具体的に見てみましょう。 [Sass] @mixin example($fsize){ border: 1px solid #fff; margin: 10px auto; font-size: $fsize; } //($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。 .box1{ @include example(16px); background-color: #ccc; } //@includeで引数をつけてmixinを呼び出します。 [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; font-size:16px; background-color: #ccc; } @includeで呼び出したことで、@mixin内の引数も適用されます。

④@mixinの引数に初期値を入れる

この引数には、初期値を入れておくこともできます。 これにより、②のように指定するのと違い、使う側で変更ができるようになり、使い勝手が良くなります。 [Sass] @mixin example($fsize:16px){ border: 1px solid #fff; margin: 10px auto; font-size: $fsize; } //($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。 .box1{ @include example();   background-color: #ccc; } .box2{ @include example(20px)  background-color: #ccc; } box1は引数の初期値をそのまま使い、box2は使う側の都合で20pxとする場合です。 [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; font-size:16px; background-color: #ccc; } .box2{ border: 1px solid #fff; margin: 10px auto; font-size:20px; background-color: #ccc; }

⑤@mixinの引数は複数入れることができる

この引数は、複数いれることもできますし、それぞれに初期値を指定することもできます。 [Sass] @mixin example($fsize:16px, $color:#fff){ border: 1px solid #fff; margin: 10px auto; font-size: $fsize; color:$color } //複数の引数を作る場合は、カンマで区切ります。 .box1{ @include example($color:$f00); background-color: #ccc; } [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; font-size:16px; color:#f00; background-color: #ccc; } // 引数のうち、文字色(color)のみ変更されています。