[Sass]혼자 유튜브 영상보고 Sass익혀보기 #6(믹스인)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..)

2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트)

3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트)

4탄 - 2022.10.28 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #4(주석사용과 중첩규칙(nesting), 단축속성 중첩, 상위선택자 참조)

5탄 - 2022.11.01 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #5(믹스인)

 

---

 

비슷하거나 동일한 스타일을 반복해서 사용해야할 때 믹스인을 사용해 
재사용할스타일 그룹을 정의할 수 있다!

#믹스인

- 믹스인을 만들때에
@mixin 지시자를 사용하고 
지시자 뒤에 사용할 믹스인의 이름작성하기

****
변수와 마찬가지로 이름은 직관적으로 작성!
****

@mixin inner-style{
  width: 1200px;
  font-size: 18px;
  color: red;
  margin-bottom: 50px;
}
/* 이렇게 믹스인을 정의하고 
믹스인의 스타일을 재사용하고자 하는 선언문에 @include로 호출해준다. */

div.contents_inner_1{
  @include inner-style;
}
div.contents_inner_2{
  @include inner-style;
}

---

 

# 믹스인의 인자
# 정의한 믹스인에서 부분적으로 스타일 변경이 필요 할 때! 

- 믹스인은 인자를 취할 수 있으며 믹스인 정의시에 
괄호에 변수를 추가하면 인자가 정의된다.
- 믹스인 호출시 인자를 전달하고자 할 때에 믹스인 이름옆에 속성값을 추가하면
골라서 속성을 바꿀 수 있다.
- 인자 추가시에 쉼표로 추가 가능(갯수제한 없음)

- @mixin 믹스인이름($변수추가)

 

@mixin inner-style($font-color){
  width: 1200px;
  font-size: 18px;
  color: $font-color;
  margin-bottom: 50px;
}

div.contents_inner_1{
  @include inner-style(yellow);
}
div.contents_inner_2{
  @include inner-style(blue);
}

---

 

 

# 믹스인 인자의 기본값

- 믹스인 인자 정의시 기본값을 정의해두면 믹스인 호출시 속성값을 전달하지 않으면
설정한 기본값 속성을 받고, 따로 속성값 전달시에 선택적으로 속성 변경이 가능하다. 
- 기본값작성시에 인자로 정의한 변수에 ':' 을 쓰고 속성값을 직접적으로 작성

 

 

 

작성정리****
믹스인 기본정의
- @mixin 믹스인이름{}

믹스인의 인자정의
- @mixin 믹스인이름($변수명){속성: $변수명}

믹스인 인자의 기본값정의
- @mixin 믹스인이름($변수명: 전달할 기본속성값){속성: $변수명}
- 호출시 믹스인 이름옆 괄호에 기본속성값 위치에 변경할 속성값 작성

믹스인 호출
- @include 믹스인이름
****