【備忘録】Sassでmixinを使う
記事IT・テクノロジー
本日は、ポートフォリオブログで、mixinの使い方についてまとめておきました。
【備忘録】Sassでmixinを使う
2022年01月10日
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に引数（ひきすう）を１つ使う
この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)のみ変更されています。
