mixin

소스코드의 중복을 막기 위해 사용
연관성 없는 반복되는 규칙을 따로 만들어서 사용

👉 flex, position, responsive, text-style(+color)

@mixin position-center($type){
	position: $type;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

%placeholder

연관성 있는 규칙을 만들기 위해 사용

👉 module
👉 button, form, icon, pagination...

%btn-base{
	display: flex;
    flex-direaction: row;
    align-items: center;
    justify-content: center;
    
    padding: 0 8px;
    font-weight: 700;
    border-radius: 4px;
    
    &:disabled{
    	cursor: not-allowed;
        opacity: 0.4;
    }
}

.btn-primary{
	@extend btn-base;
    color: #fff;
    background-color: #000;
    
    &:not(:disabled):hover{
    	background-color: gray;
    }
}