【sass】@mixinの使い方

sassの@mixinの記述方法についてまとめています。

サマリ

• cssを簡潔に書くための機能
• 変数を渡すことでcssのプロパティを適用できる関数のような使い方が可能
• 引数の初期値を設定できるので、mixinの呼び出し先で同じcssの記述をする必要がない
• animation~で始まるプロパティをまとめて書く方法もある
• background~も上記と同様

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

.rect {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: $cBlack;
  @include animation($name: sk-bouncedelay);
  // animation: sk-bouncedelay 1.4s;
  // animation-timing-function: ease;
  // animation-delay: 3s;
  // animation-iteration-count: infinite;
  // animation-direction: alternate-reverse;
  // animation-fill-mode: both;
}
.paused {
  animation-play-state: paused;
}

@keyframes sk-bouncedelay {
  from {
    transform: scale(0);
    background-color: black;
  }

  to {
    transform: scale(1);
    background-color: green;
  }
}