【Scssの基本】@mixin(ミックスイン)の基本的な利用方法

  • このエントリーをはてなブックマークに追加

@mixinとはスタイルの集まりを定義し、いろいろなページで呼び出して使い回すことができる機能です。引数を利用すると、定義した@mixin内のスタイルの値を一部変更することもできます。
他ページでも利用されるスタイルを定義する場合、@mixinを作成しておくとスタイル定義の重複が無くなり見やすいScssを作成することができます。

  1. @mixinの基本的な使い方
  2. 引数を利用した@mixinの使い方
  3. 引数に初期値を設定
  4. 引数を複数指定

 1. @mixinの基本的な使い方

ミックスインは、@mixin ミックスイン名{~ }と指定し、{~}内(~部分)にスタイルを書いていきます。

● @mixinを定義

● 定義した@mixinを呼び出し(mixinsample.scss)

■ コンパイルされたCss(mixinsample.css)

cardクラスにmixinで定義したCssが入っていることがコンパイルされたCssから確認することができます。

 2. 引数を利用した@mixinの使い方

@mixinは引数が使えるのも大きな特徴です。引数を利用することで、スタイルの値の一部を変更して使い回すことができるため、カスタマイズ性が上がります。引数を利用する場合、@mixin ミックスイン名(){ }の()内に引数(変数)を書きます。

● @mixinを定義(paddingの値を引数で渡す)

● 定義した@mixinを呼び出し(mixinsample.scss)

● コンパイルされたCss(mixinsample.css)

paddingの値がcardクラスとcard1クラスで変化していることが確認できます。

 3. 引数に初期値を設定

引数を利用した@mixinを呼び出す場合、@includeで必ず値を入れる必要があり面倒です。そこで、引数に頻繁に使う値を初期値として入れておくと、初期値を書き換える場合だけ値を書けばよくなります。

● @mixinを定義(引数指定、paddingの初期値は20px)

● 定義した@mixinを呼び出し(mixinsample.scss)

● コンパイルされたCss(mixinsample.css)

cardクラスはpadding値を渡していないため初期値の20pxが設定され、card1クラスは引き渡したpadding値の20px 10pxが設定されています。

 4. 引数を複数指定

第三章ではpadding値を渡して動的に指定する方法を説明しました。さらに、引数を複数していすることによって、padding値と背景色を動的に指定することも可能になります。

● @mixinを定義(background-color値とpadding値を引数で渡す)

● 定義した@mixinを呼び出し(mixinsample.scss)

● コンパイルされたCss(mixinsample.css)

@mixinを利用すると、見やすいコードにすることができます。同じスタイルが適用されている場合は@mixinで定義できないか考えてみましょう。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*