2023年4月9日Sassの@mixinってなんなんや。コードはよく出てくるけど今いちよくわからぬ本記事では、上記のような方向けにSassの@mixinについて徹底解説します。これからSassを学ぶ方向けにわかりやすく解説します。引数を入れてみる@contentを使ってみる@mixin(ミックスイン)はどういうところで使うねん??メディアクエリを定義しちゃうスタイルをリセットしちゃう【まとめ】Sassの@mixinを使って効率的に進める@mixin(ミックスイン)とはなんぞや@mixin(ミックスイン)はSassの機能のひとつです。@mixinで定義したスタイルは再利用できます。イメージとしては3行のコードも@mixinを使えば一行で書けるようになる!みたいな感じどす。下記のようなCSSがあるとします。skyblue;}上のコードを見ると、リセット用のCSSは全く同じ内容なのに2回書かれてます。いちいちこれを書くのはだるいですね。いうときに、@mixinを使えば以下のように書けます。skyblue;}だいぶコードがすっきりしました。こんな感じで@mixinは定義したスタイルを再利用することができちゃいます。すばら!!以下から具体的な書き方を紹介します。@mixin(ミックスイン)の使い方@mixinで定義includeで呼び出し工程を大きく分けると上記の通りです。@mixinを定義する@mixinの書き方は下記です。...省略となります。mixinの名前はどんな事を定義しているのかわかる名前にしてあげましょう。@includeで呼び出し@mixinを定義しただけでは動きません。定義した@mixinを使うには@includeを使います。<@mixinの名前>この1行だけでさきほど定義したコードを記述できます。定義した@mixinを呼び出す基本の説明はこれで終わりです!@mixinのさらに便利な使い方ここまでは、基本的な@mixinの使い方を説明してきましたが、実はまだまだ使い方があります。ある使い方を説明します。引数を使ってみる@contentを使ってみる引数を入れてみる@mixinでは引数を使うことができます。引数は関数で使える値みたいな感じです、詳しくは下記の記事が参考になります。参考引数とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典null実例を見たほうが早いです。以下の例では正方形を作るための@mixinを定義しています。square()の()内で指定した値がwidthとheightの値に入るようになっています。こんな感じで、入れる値を任意にしてより使いやすく再利用ができます。@contentを使ってみる次は@contentという機能を使ってみましょう。{}で{}内に任意の値を入れられるものです。イメージが湧かないと思うのでまたまた実例で説明します。14pxが適用されてますね。こんな感じで@contentは、記述した任意の値が反映されるよ~という意味です。@mixin(ミックスイン)はどういうところで使うねん??色々と例文を見てきましたが、結局実際のコーディングではどういうところで使うねん!と。ここからは実際のコーディングで@mixinの使用例を見ていきましょう。メディアクエリを定義しちゃうさっきの例文でもちょっと出ましたが...@mixinがよく使われるのはメディアクエリの指定です。and...と毎回書くのって大変ですよね。あと管理もしづらいです。いうときのために@mixinで定義しておけば、メディアクエリの記述量が格段に減ります。これは実務では必ず使う記述なので覚えておきましょ。メディアクエリを指定する方法は下記の記事で詳しく解説しています。Sassの@mixinを使ってメディアクエリを指定する方法【コーディング爆速】スタイルをリセットしちゃうデフォルトのスタイルをリセットするときなんかにも使えそうです。ボタンのスタイルをリセットしてみます。任意のスタイル}こんな感じで、あらかじめリセット用のスタイルを定義しておけば書く手間が省けます。【まとめ】Sassの@mixinを使って効率的に進めるというわけで記事のまとめです@mixin(ミックスイン)とは?スタイルを再利用できるSassの機能。@includeで呼び出すことでどこでも使える@mixinの使い方@mixinを定義する@includeで呼び出す@mixinを使うと、効率的にコーディングを進められるのでぜひマスターしてみて下せえ!!というわけで、よきSassライフを。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。前の記事Sassの@mixinを使ってメディアクエリを指定する方法【コ...次の記事Sass(SCSS)をコンパイルできる環境を作る方法【Live...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。