목록2023/10/30 (1)

Bleeding edge

scss animation mixin

css처럼 애니메이션을 바로 사용하게 된다면 scss에서는 문제가 발생한다. 이유는 애니메이션의 name이 바뀐다! 만일 animation이름을 fadeOut이라는 이름을 SnackBar에서 사용하면 애니메이션이름은 다음과 같이 바뀐다 .Snackbar_wrapper{ animation-name: Snackbar_fadeOut__uuidexample; } scss에서는 애니메이션을 제외하고는 이름의 중복을 피해주는 sass 덕분에 편리하지만, 애니메이션에서 mixin을 사용하지 않으면 상당히 불편하다. 그래서 다음과 같은 mixin을 작성하였다. mixin @mixin animate($animation, $duration, $method, $times) { animation-name: $animation..
HTML & CSS 2023. 10. 30. 02:25
이전 Prev 1 Next 다음