> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/custom-mixin.md).

# Custom Mixin

## font-and-line-height()

`font-size`, `font-weight`, `line-height`를 반복해서 사용하는 경우가 많다. 해당 믹스인을 한 번 만들어 볼까?\
\-- 만 결과 같이 넣으면 더 좋겠다. (어디에 활용했는지, 사용방법은 무엇인지...)

### Mixin 생성 

`font-size`, `font-weight`, `line-height`를 한번에 입력할 수 있는font-and-line-height 이름의 믹스인을 만들었다. 

```csharp
@mixin font-and-line-height($size, $line-height: null, $weight: null) {
  @include font(size $size weight $weight lh $line-height);
}
```

###  사용 방법 

각각 `font-size`는 필수 값이다. 나머지 속성은 `null` 값을 기본값으로 선택적으로 값을 넣을 수 있도록 했다.   

믹스인의 이름이 길어서 사용할 때 불편함을 해소 하기 위해 스니펫을 만들어서 간편하게 사용했다. 

### 문제 

#### fzp(),font-and-line-height() 믹스인 font-size 중복 현상 

`font-size`를 입력하는 믹스인을 같은 요소에 사용했을 때 `font-size` 속성 중복되어 사용된다. 물론, 아래와 같은 상황에서는 `line-height` 속성만 따로 사용할 수 있지만 나중에 편리한 재사용을 위해 `font-and-line-height` 믹스인에서 `font-size`를 `null`로 두어도 사용이 가능하도록 수정 해야겠다.  

![VS Code에 믹스인을 입력](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPMxeuXXlt5MeFuAWX4%2F-MPMyJa7BR4QLaZyq4Oo%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.34.47.png?alt=media\&token=1d20739f-0e06-422e-ac20-e5d8f3d38565)

![개발자 도구로 스타일 적용 확인](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPMxeuXXlt5MeFuAWX4%2F-MPMyYZGkGOeYkiO3zqQ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.34.29.png?alt=media\&token=e04704f6-efd9-4053-9c30-30137fdc5dbc)

###