260223 (mixin)

• 믹스인 정의: @mixin
  키워드를 사용하여 반복적으로 사용되는 스타일 블록을 정의합니다.
  이는 재사용 가능한 스타일 조각(컴포넌트)을 만들어 코드 중복을 줄이는 데 유용합니다.
  매개변수, 인자 사용 가능

• 믹스인 사용: @include
  키워드를 사용하여 정의된 믹스인을 호출하고 해당 스타일을 적용할 수 있습니다.
  다양한 요소에 같은 스타일을 손쉽게 적용할 수 있어 유지보수가 간편해집니다.

  // @mixin : 재사용 컴포넌트 정의
  @mixin box-base() {
  	width: 200px;
  	height: 200px;
  	background-color: #e5e5e5;
  	border-radius: 1.2rem;
  	margin: 10px;
  	transition: all .3s ease;
  	
  	&:hover {
  		background-color: #000;
  	}
  }

.box-1 {
	@include box-base();
}

.box-2 {
	@include box-base();
	
	&:hover{	
	background-color: #777777;
	}
}