@mixin(SCSS)

@mixin(SCSS)

: 반복되는 CSS 코드를 하나의 묶음으로 만들어 필요할 때마다 불러서 사용하는 기능

-> 컴포넌트 정의와 같음

@mixin box-base() {
	width: 200px;
	height: 200px;
	background-color: #34cfeb;
	border-radius: 1.2rem;
	margin: 10px;
	transition: all .3s ease;
	
	&:hover {
		background-color: #6d2fc4;
	}
}

@include

: mixin 호출

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

-> mixin에서 변경하고 싶다면 바로 밑에 작성하면 됨

@mixin에서의 매개변수, 인자 사용

1. @mixin에 매개변수 입력

@mixin box-base($btn-bg-color, $font-size) {
	width: 200px;
	height: 200px;
	background-color: $btn-bg-color;
	font-size: $font-size;
}

2. @include에 인자값 입력하여 전달

.box-1 {
	@include box-base(#d63eb8, 2rem);
}

@mixin 초기화 (기본값 지정)

1. @mixin 함수값 () 안에 매개변수 기본값 지정

@mixin box-base(
	$btn-bg-color: #31eb69, 
	$font-size: 1.3rem,
	$width: 150px,
	$height: 150px
	) {
	width: $width;
	height: $height;
	background-color: $btn-bg-color;
    font-size: $font-size;
}

2. @include에 변경할 인자값 작성 (기본값이 있으면 전달 생략 가능)

.box-1 {
	@include box-base(#34cfeb, 2rem, 300px, 250px);
}