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; } }