[SASS]애니메이션 mixin

설치하기

yarn add node-sass

mixin 제작

//animation
@mixin ani($num) {
  -webkit-transition: $num ease-in-out;
  -moz-transition: $num ease-in-out;
  -o-transition: $num ease-in-out;
  transition: $num ease-in-out;
}

사용하기

.example{
	width: 100px;
	height: 100px;
	opacity:1;
	@include ani(0.3s);
	&:focus,
	&:hover{
		width: 100px;
                height: 100px;
                opacity:0.8;
                @include ani(0.3s);
	}
}

2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/13 - [프로그램 강좌] - [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/15 - [프로그램 강좌] - [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/17 - [프로그램 강좌] - [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/19 - [프로그램 강좌] - [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS