Custom Mixin

font-and-line-height()

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

Mixin 생성

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

@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로 두어도 사용이 가능하도록 수정 해야겠다.