コーディング
Sassで使う@mixinについてまとめておきます。
@mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。
必要な時に@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につける名前(ここでは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内の引数も適用されます。
この引数には、初期値を入れておくこともできます。
これにより、②のように指定するのと違い、使う側で変更ができるようになり、使い勝手が良くなります。
[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;
}
この引数は、複数いれることもできますし、それぞれに初期値を指定することもできます。
[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)のみ変更されています。