はじめに
前回Sassに関する概要と一部の機能を紹介しました。
今回はSassの機能の中でも、とても便利な「mixin」という機能について紹介したいと思います。
よろしくお願いします。
mixinとは
mixinという機能はいくつかのコードをまとめて、簡単に呼び出すようにする機能です。
同じコードを書く手間が省けるので、読みやすいコードになります。
mixinの使い方
まずはmixinを下記のように定義します。
@mixin hoge {
width: 100px;
padding: 20px;
}
上記のmixinを使うためには、＠include mixin名を記述することで使用することができます。
下記の例を見てみましょう。
@mixin hoge {
width: 100px;
padding: 20px;
}
.hoge-1 {
@include hoge;
}
.hoge-2 {
@include hoge;
}
mixinに引数を渡して、柔軟にコードに幅を持たすこともできます。
下記の例を見てください。
@mixin hoge-text($color) {
font-size: 14;
color: $color;
}
.hoge-text1 {
@include hoge-text(#ff0000);
}
引数に任意の色を設定してあげると、$colorに代入されます。
終わりに
mixinは同じ記述を何度も書く必要がなくなり手間を省けるだけでなく、記述量が減るのでコード自体がすっきりしますね。
引数を設けることにより、柔軟に対応ができますし、ぜひ活用していきたいです。
↧