【備忘録】Sassでmixinを使う
本日は、ポートフォリオブログで、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に引数(ひきすう)を1つ使う
このmixinにつける名前(ここではexample)に、引数を付けることができます。
引数とは、mixinパッケージの中
0