mixinの使い方[SCSS]

SCSSではmixinとincludeを使って、よく使うスタイルを何度も呼び出すことができます。基本的な使い方をご紹介しましょう。

mixinの使い方

@mixin 名前 {
  よく使うスタイル
}
例1
@mixin box {
  height: 100px;
  width: 100px;
}

.box1 {
  @include box;
}

まずmixinでよく使うスタイルを定義します。そして呼び出したい箇所で「@include mixin名」と記述すると定義したスタイルを使用できます。例1の場合、mixinで定義したheight100px、width100pxをboxクラスに指定しています。

引数

mixinは引数を受け取ることもできます。

例2
@mixin box($height, $width) {
  height: $height;
  width: $width;
}

.box2 {
  @include box(100px, 80px);
}

コメント

タイトルとURLをコピーしました