SCSS_@mixin과 @include

// 반복적인 코드 '@mixin 이름'으로 설정하고, 쓸 때마다 요소에 @include로 불러오기!
// 실무에서는 mixin 파일 따로 생성, scss 파일에 연결시켜서 호환!

 

 

예시1. 기본문법 응용
@mixin clear{ 
 &:after { content: ""; display: block; clear: both; }
}
div { @include clear; }

>>css 코드에 div:after { content: ""; display: block; clear: both; }로 자동 설정

 

 

예시2. 매개변수 응용 

@mixin border ($color){
    border: 1px solid $color;
}
div { @include border (blue); }
>> $color라는 매개변수를 만들고 @include 할 때 변수자리, ()에 색상 입력!

 

 

예시3. 매개변수 복수로 넣기

@mixin box ($w, $h){
    width: $w; height: $h;
}
div { @include box (300px, 400px); }
>> 가로, 세로값 매개변수를 만들고 @include 할 때 변수자리에 각 수치 입력!

 

 

 

p.s - 유튜브 리베하얀 영상 참고