会社概要お問い合わせTOPコーディング【備忘録】Sassで@mixinを使うSassで使う@mixinについてまとめておきます。1@mixinとはCSSのスタイルをパッケージしておくもの@mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。必要な時に@mixinを呼び出すことで、まとまったスタイルを適用できます。2@mixin基本形@mixinでパッケージを作ります。使うときは、@includeでパッケージを呼び出します。auto;}//@mixinにexampleという名前をつけました。#ccc;}//exampleという@mixinを呼び出し、background-colorもつけました。#ccc;}@includeで呼び出したことで、@mixin内のスタイルも適用されます。3@mixinに引数(ひきすう)を1つ使うこのmixinにつける名前(ここではexample)に、引数を付けることができます。引数とは、mixinパッケージの中で、使う時の都合にあわせてカスタマイズできる要素をいいます。具体的に見てみましょう。$fsize;}//($fsize)が引数部分。()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。#ccc;}//@includeで引数をつけてmixinを呼び出します。#ccc;}@includeで呼び出したことで、@mixin内の引数も適用されます。4@mixinの引数に初期値を入れるこの引数には、初期値を入れておくこともできます。これにより、2のように指定するのと違い、使う側で変更ができるようになり、使い勝手が良くなります。$fsize;}//($fsize)が引数部分。()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。#ccc;}box1は引数の初期値をそのまま使い、box2は使う側の都合で20pxとする場合です。#ccc;}5@mixinの引数は複数入れることができるこの引数は、複数いれることもできますし、それぞれに初期値を指定することもできます。$fsize;color:$color}//複数の引数を作る場合は、カンマで区切ります。引数のうち、文字色(color)のみ変更されています。【体験】東京都の宿泊施設を活用したサテライトオフィスの提供事業でリモートワークやってみた>>24時間以内に必ずお返事致します。お仕事のご依頼お問い合わせはこちら。